Forem: Jscrambler

12 Frameworks for Hybrid Mobile Apps

Jscrambler — Wed, 24 Aug 2022 09:49:58 +0000

Working with hybrid mobile app frameworks makes life easier for developers as they are able to write code once and build mobile applications that run on the main platforms with no extra effort. The application will run on Android and iOS and the code can be reused for progressive web applications and even desktop applications (by using Electron, with some tweaks, you can adapt the code for the desktop environment).

In this post, let us dive into a list of 12 very useful frameworks to help you build amazing hybrid mobile apps.

1. React Native

With React Native, you can build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components.

Using this framework, you don't build a "mobile web app", an "HTML5 app", or a "hybrid app". You build a real mobile app that's indistinguishable from an app built using Objective-C or Java. React Native uses the same fundamental UI building blocks as regular iOS and Android apps. You just put those building blocks together using JavaScript and React.

If you're already creating apps with React Native, make sure you are protecting their code by following our guide.

2. Ionic Framework

The Ionic Framework is a complete open-source SDK for hybrid mobile app development. It provides tools and services for hybrid mobile app development using Web technologies like CSS, HTML5, and Sass. Apps can be built with these Web technologies and then distributed through native app stores to be installed on devices by leveraging Cordova.

This framework is 100% free and open-source, licensed under MIT and powered by a massive worldwide community. They have over 120 native device features like Bluetooth, HealthKit, Finger Print Auth, and more with Cordova/PhoneGap plugins and TypeScript extensions. You can use their CLI to create, build, test, and deploy your Ionic apps onto any platform. The framework has the Ionicons icon pack with hundreds of the most common app icons. And you can develop your apps by Live Reload because to compile and redeploy your app at every step of development is for chumps. And there are more useful features like deep linking, AoT Compiling, and a custom animations API.

Ionic is framework-agnostic and has official support for React, Preact, Angular, and Vue, as well as for Web Components. Ionic version 5 brought lots of UI updates.

Side Note: Protecting Your Ionic Source Code

We have a comprehensive tutorial on how to protect your Ionic mobile hybrid app. If you want to make sure that nobody is able to reverse-engineer, steal, or tamper with your code, you may want to take a look at it here!

3. NativeScript

Originally created by Progress, NativeScript apps are built using JavaScript, or by using any language that transpiles to JavaScript, such as TypeScript, for instance.

This hybrid mobile app framework has deep integration with modern Angular versions, including full-stack features like integration with the Angular CLI, router support, and code generation. It also includes integration with Vue via a community-developed plugin, which enables using the Vue CLI, Vuex, and other nice Vue.js features.

So, what does a hybrid mobile app built with NativeScript look like? Well, mobile applications built with NativeScript are actually fully native apps and use the same APIs as if they were developed in Xcode or Android Studio. This means you get platform-native UI without WebViews and running with native performance.

Additionally, software developers can re-purpose third-party libraries from Cocoapods, Android Arsenal, Maven, and npm.js in their mobile applications without the need for wrappers.

Side Note: Protecting Your NativeScript Source Code

Progress Telerik has recommended Jscrambler as the solution of choice to protect NativeScript Applications! See our integration guide here.

4. Quasar

The Quasar Framework is powered by Vue.js and enables developers to write code a single time and deploy simultaneously as a website (SPA, PWA, SSR), mobile app (iOS, Android) and desktop (using Electron) using a single code base.

Out of the box, Quasar brings state-of-the-art UI, following Google Material guidelines. It also offers HTML/CSS/JS minification, cache busting, tree shaking, sourcemapping, code-splitting & lazy loading, ES6 transpiling, linting code, and accessibility features, while keeping a small performance overhead - actually, the creators of this hybrid mobile app framework claim that it is "the most performance-focused framework".

With the Quasar CLI, developers also benefit from additional features such as hot-reloading. One of the frameworks most praised benefits is its very thorough documentation and active community.

It's worth mentioning that Quasar is 100% free, open-source, and licensed under MIT.

5. Kendo UI

Kendo UI provides a very extensive collection of JavaScript UI components with libraries for jQuery, Angular, React, and Vue for creating hybrid mobile apps.

Powered by Progress Telerik (the same parent organization of NativeScript), it comes packed with dozens of ready-to-use widgets for jQuery, Angular, React, and Vue. Kendo UI is focused on allowing development teams to quickly build high-performance hybrid mobile apps with excellent performance.

This hybrid app framework is open-source, but it is aimed at enterprise customers - so no free version is available as of right now. One of the key selling points of Kendo UI is that you get world-class support and the guarantee that every component has been thoroughly tested by their strict QA process.

Among the most noteworthy Kendo UI clients, we find HP, NASA, and over 140,000 other companies across the world. It is definitely a hybrid app development framework to consider if you're looking for an enterprise-grade solution with dedicated support.

6. Framework7

Framework7 is a free and open-source mobile HTML framework to develop hybrid mobile apps, web apps, and progressive web apps (PWAs) with native look and feel. Plus, it can be paired with extra tools like Electron and NW.js, allowing you to build native desktop apps.

This hybrid app framework can be an indispensable prototyping tool to show working app prototypes as soon as possible in case you need to. It is focused on iOS and Google Material design to bring the best experience and simplicity.

Much like similar hybrid app frameworks, Framework7 offers a rich ecosystem of components for popular JS frameworks the likes of Vue, React, and Svelte.

Some useful features provided by Framework7 are native scrolling, library-agnostic, pages transition animation, multiple views support, hardware-accelerated animations via CSS3, route pages by using the combination of XHR, caching, browser history and preloading.

7. Aurelia

Aurelia characterizes itself as a "collection of Modern JavaScript modules, which when used together, function as a powerful platform for building browser, desktop and mobile applications". As such, any of Aurelia's modules can be used on its own in any JavaScript or Node.js project.

With a focus on clean yet powerful code, Aurelia is especially aimed at those who prefer to use vanilla JavaScript or TypeScript. In fact, they go so far as claiming that they are "the only framework that lets you build components with plain, vanilla JavaScript/TypeScript". Still, because it strictly follows web standards, it can readily be integrated with any framework or library out there.

As for its features, some of the most powerful Aurelia modules include metadata, dependency injection, binding, templating, and routing. Its ecosystem includes plugins for state management, internationalization and validation, as well as tools like a CLI, Chrome debugger, and VS Code plugin. And because Aurelia is based on a high-performance reactive system, it batches DOM updates faster than virtual-DOM-based frameworks.

This hybrid mobile app framework is 100% free to use, open-source, and licensed under the MIT license.

8. Onsen UI

Onsen UI has quickly grown in adoption since its release in 2013. It is an open-source framework under the Apache v2 license. Onsen UI is framework-agnostic UI components, you can choose and switch among the frameworks: AngularJS, Angular, React, and Vue.js or go pure JavaScript to build your hybrid apps.

The framework architecture consists of three layers: CSS components, Web components, and framework bindings. It also features a large collection of ready-to-use, responsive out-of-the-box components.

This framework is very easy to use, flexible, has semantic markup components, and is free to use for commercial projects.

9. Ext JS

Ext JS is an enterprise-grade product for building cross-platform end to end mobile web apps with HTML5 and JavaScript. It is especially fit to build data-intensive, cross-platform web and mobile applications.

This hybrid mobile app framework isn't afraid to state that it is "The Best JavaScript Framework In The World". And in fact, among the 10k companies using the framework, we find Apple, Adobe, Cisco, Nvidia, and many other global enterprises.

For individual developers and freelancers, Ionic, Onsen UI or Framework7 will be a better choice - but, for enterprise applications, Ext JS leads the way.

ExtJS scores highly against its competitors by providing a native look and feel across all of the platforms it supports. It helps create high-performance hybrid mobile apps with near-native experience and packs ready-to-use widgets with native look and feel for all leading platforms including iOS, Android, Windows Phone, and Blackberry. The framework also features a drag and drop HTML5 visual application builder with tons of ready to use templates. It has built-in support for Angular and React.

10. Axway Appcelerator

Appcelerator (also known as Appcelerator Titanium) is a JavaScript-based hybrid app framework. It is cross-platform with full support for Android and iOS. In the end, the compiled code is a combination of native and JavaScript that improves performance for hybrid mobile app development. It has integrations available for Angular and Vue.

Appcelerator is a good solution for creating hybrid mobile apps. To get started with Appcelerator, download Titanium studio. The Titanium SDK is equipped with a number of mobile platform APIs and Cloud service to use as an app backend. It comes with platform-independent APIs which makes it easier to access phone hardware.

Appcelerator uses Hyperloop to join the cross-platform power of Titanium with direct access to any native API using JavaScript. The framework has both free and paid plans.

11. Svelte Native

Svelte Native is the youngest framework on this list for hybrid app development. With the Svelte framework quickly growing in popularity among web developers thanks to its simplicity, the mobile framework quickly followed in its footsteps.

Svelte Native is powered by Svelte and NativeScript. So, while mobile app frameworks like React Native perform the bulk of their work on the actual mobile device, Svelte Native takes a new approach by shifting that work into a compile step at build time.

Plus, rather than relying on techniques like virtual DOM diffing, Svelte creates code that updates native view widgets when the app's stage changes.

Be aware that, since this framework is still in its early stages, you may experience some issues. And, who knows - maybe this will be the next big thing in hybrid mobile app development.

12. Xamarin

Xamarin is a Microsoft-owned San Francisco California-based software company founded in May 2011 which has cross-platform implementations of the Common Language Infrastructure (CLI) and Common Language Specifications (often called Microsoft .NET).

With a C# shared codebase, developers can use Xamarin tools to write native Android, iOS, and Windows apps with native user interfaces and share code across multiple platforms, including Windows and MacOS. Xamarin is the top hybrid mobile app development framework. It saves your time regarding re-utilizing abilities, tools, teams and the best significant part is code. You can influence the array of Xamarin and Android APIs as well as design an amazing experience for glass with the Android SDK and GDK.

Conclusion

Hybrid app development has grown immensely over the past few years. It's no wonder that many development teams are opting-in for hybrid mobile apps instead of their native counterparts - they provide faster development, easier prototyping, and a reportedly better ROI.

If you're planning to develop a mobile application, choosing a hybrid app framework can also help you build apps for web and desktop more easily as a way to reach more customers.

And with the advancements we've seen in the JavaScript ecosystem and in each of the hybrid mobile app frameworks presented on this list, hybrid mobile apps today are closer than ever to native apps, both in their overall look and in performance.

Lastly, if you're building hybrid mobile apps with JavaScript, you should secure your source code against theft and reverse-engineering. Start a free Jscrambler trial and protect your code in 2 minutes!

Cross-site Scripting (XSS)

Jscrambler — Tue, 12 Jul 2022 15:43:51 +0000

Cross-site scripting is a vulnerability that happens when there’s an injection of malicious code to run on a regular webpage. This piece of code can go on to cause unauthorized actions and access data. Many times, these attacks seem to be a legitimate part of the website because they are added as parameters on the original URL.

We’ll be covering different types of these attacks and how modern frontend frameworks help handle XSS attacks.

Types Of XSS Attacks

Cross-site scripting attacks come in different forms in a bid to steal user data and information.

The main idea is to use any input medium to send malicious code to the application. These types are reflected, Stored, and DOM-based attacks.

Reflected XSS Attacks

This is the most common type of attack where the attackers create a malicious link using the website and adds the malicious code as URL param.

https://webapp.com/?keyword=<script>alert("You've been hacked")</script>

The attacker takes the compromised URL and sends it to a specific user or a number of users through phishing emails. Unsuspecting users click on the link in the mail and open it in their browser. The code in the parameter runs on the website and executes whatever malicious intent the attacker wants.

Interestingly, Chrome now checks for URLs with script tags like what we have above. It detects it as an XSS attack and counters it. So attackers now try to shorten the links using link shorteners, that way, the param are not explicitly displayed as part of the link. Or, they encode the param in base 64 or whatever format that does not display the script tag and inner code.

Stored XSS Attacks

This type of attack takes a different approach. The attack is initiated from inside the website itself. It simply sends a piece of javascript code to the database using a regular input tag. The attacker goes to the website and looks for any input that can send data to the server like comment sections, search bar, or even forms. Then, instead of sending a regular text the attackers sends malicious code inside a script tag.

<script>alert("you've been hacked")</script>

We then store the piece of code in the database. Whenever we call the data on the client-side, the piece of code is returned and runs, rather than just displaying it. For instance, the hacker can use this to get the user’s credentials in the local storage or cookies and send it to their own servers, thus compromising users' data.

DOM-Based XSS Attacks

Similar to the reflected XSS attacks, this can be initiated using parameters in the URL. In this case, the script tag will contain a function that uses the DOM to get HTML elements on the webpage and manipulate the webpage by running their own script. Let’s take a look at this code below:

window.onload = function () {var searchResult = document.getElementById('searchResult');searchResult.innerHTML = `You've been hacked` + searchResult;}

We get the text whose id is searchResult and replace it with a malicious text on load. This is added to the DOM using innerHTML.

Now, to add this code to the webpage we will need to add it as a query param.

https://webapp.com/?keyword=<script>window.onload = function () {var searchResult = document.getElementById('searchResult');searchResult.innerHTML = `You've been hacked` + searchResult;}</script>

As explained earlier, the attacker finds a way to send this malicious link to unsuspecting victims who unknowingly run the code and get hacked.

How Current Single Page Application (SPAs) Handle XSS Attacks

As the web evolves, Single Page Applications (SPAs) were created to abstract a lot of complicated things on the frontend which greatly improves the developer experience. These things include data management, state, reusability of UI components, security, etc. For instance, React helps handle XSS attacks by escaping all variables that is displayed to the user.

const Component = () => { 
    return (   
        <h1> Hello {hackString}!</h1>  
        )
        }

What this means is by design attackers can’t inject code that can override existing text on the webpage.

For instance, if the attacker tries to inject code in a script tag like this:

var hackString = '<script>alert("YOU ARE HACKED")</script>';

If you try to display this string as a text in our react component, React escapes it and and displays it as a plain string.

return (        
        <div>{hackString}</div>   
        );

The only way the attacker can find a way around it is if we use dangerouslySetInnerHTML to add text to our react component, which is something React advises against because of the XSS risk.

return (      
        <div dangerouslySetInnerHTML={{"__html": hackString}} />   
        );

Vue

Vue also handles XSS attacks well. It escapes all HTML content, meaning similar to React, external code cannot be injected into any component in our application.
Assuming the attacker tries to inject hackString into our Vue app:

<h1>{{ hackString }}</h1>

Vue escapes the Javascript code to display the following HTML:

&lt;script&gt;alert(&quot;hackString&quot;)&lt;/script&gt;

The only case where we can create XSS attack vulnerability in our application is if we use v-html. That’s because v-html` uses the DOM to add content directly to our website.

Conclusion

This article covered cross-site scripting and how it can affect websites. We talked about types of XSS attacks and how they present themselves differently. These attacks are caused by user-generated data and so the solution is to be able to filter the data before sending them to the server and vice-versa.

Also, we looked into modern frontend frameworks and how they secure the apps against attacks. This is done by escaping data that is not text, meaning strings containing code can be escaped instead of allowing the browser to run it as actual code. As you build, one thing to keep in mind is that XSS attacks come in different ways, and we should consider the security of our apps.

Getting Started with React Navigation v6 and TypeScript in React Native

Aman Mittal — Fri, 01 Jul 2022 14:27:15 +0000

When you have a complex mobile application structure or many screens in your application, handling navigation can become tricky. However, with open-source libraries like React Navigation, the process of implementing navigation patterns becomes easier.

React Navigation library is one of the most used navigation libraries in the React Native ecosystem. It is written in TypeScript, and you can create React components and apply any navigation patterns from Stack, Tab, and Drawer.

In this tutorial, let's look at how you can set up and use React Navigation and TypeScript together in a React Native app. One cool advantage that TypeScript provides is type checking for route names and route parameters.

Pre-requisites

If you are going to code along, make sure you have the following already installed:

Nodejs (>=12.x.x) with npm/yarn installed
expo-cli
Access to a real device or an iOS simulator or an Android Emulator so that you can run your code example

The source code used in this tutorial is available at this GitHub repository.

Creating a React Native project with expo-cli

Before diving deep into configuring TypeScript with React Navigation, let us create an example app that uses React Navigation to navigate between different screens. This example screen will also have example screens.

You can skip this section if you are already familiar with Stack and Tab navigators in React Navigation.

Open the terminal and run the following command to create a new React Native app. When asked to "choose a template", select blank (TypeScript). This template creates a React Native project with TypeScript already configured. Enough for us to get started.

expo init myApp

# This will prompt a "Choose a template" question
# Select "blank (TypeScript)"

# After the project is created, navigate inside the project directory
cd myApp

After navigating inside the project directory, run the following command to install React Navigation libraries and their packages in the terminal window.

yarn add @react-navigation/native @react-navigation/bottom-tabs @react-navigation/native-stack && expo install react-native-screens react-native-safe-area-context

The above command will install packages for implementing Stack and Tabs navigators. In the example app, we will use both of these patterns.

Adding a stack navigator

React Navigation's stack navigator allows your app to transition between screens and manage navigation history. The stack navigator you will implement in this section will allow the app user to navigate from one screen to another.

Start by creating src/ directory that will contain the screen and navigation-related code files.

The next step in the example app is to create mock screens. Create a screens/ directory inside src/. Inside this directory, let's create four component files:

HomeScreen.tsx
DetailsScreen.tsx

The HomeScreen component displays a list of characters from the Star Wars API. On pressing any item from the list, the app user will be able to navigate to the DetailsScreen where they can view the details of each character.

Add the following code snippet to the HomeScreen.tsx:

import { StyleSheet, View, Text, Pressable, FlatList } from 'react-native';
import { useNavigation } from '@react-navigation/native';

const DATA = [
  {
    id: 1,
    name: 'Luke Skywalker',
    birth_year: '19BBY',
  },
  {
    id: 2,
    name: 'C-3PO',
    birth_year: '112BBY',
  },
  {
    id: 3,
    name: 'R2-D2',
    birth_year: '33BBY',
  },
  {
    id: 4,
    name: 'Darth Vader',
    birth_year: '41.9BBY',
  },
  {
    id: 5,
    name: 'Leia Organa',
    birth_year: '19BBY',
  },
];

const HomeScreen = () => {
  const navigation = useNavigation();

  const renderListItems = ({ item }) => {
    return (
      <Pressable
        onPress={() =>
          navigation.navigate('Details', {
            name: item.name,
            birthYear: item.birth_year,
          })
        }
      >
        <Text
          style={{ fontSize: 18, paddingHorizontal: 12, paddingVertical: 12 }}
        >
          {item.name}
        </Text>
        <View
          style={{
            borderWidth: StyleSheet.hairlineWidth,
            borderColor: '#ccc',
          }}
        />
      </Pressable>
    );
  };

  return (
    <View style={{ flex: 1, paddingTop: 10 }}>
      <FlatList data={DATA} renderItem={renderListItems} />
    </View>
  );
};

export default HomeScreen;

In the above code snippet, observe that the onPress prop on the Pressable component is used to pass the name and birthYear of the character to the Details screen as route parameters.

Add the following code snippet to the DetailsScreen.tsx:

import { View, Text } from 'react-native';
import { useRoute } from '@react-navigation/native';

const DetailScreen = () => {
  const route = useRoute();
  const { name, birthYear } = route.params;

  return (
    <View style={{ flex: 1, paddingTop: 12, paddingHorizontal: 10 }}>
      <Text style={{ fontSize: 18, paddingBottom: 12 }}>Name: {name}</Text>
      <Text style={{ fontSize: 18 }}>Birth Year: {birthYear}</Text>
    </View>
  );
};

export default DetailScreen;

In the above code snippet, notice that the route.params is used to read the parameters passed from the HomeScreen.

After setting up the screens, create the navigation/ directory inside the src/ and inside it, add two files:

index.tsx: to keep the Root Navigator configuration
HomeStack.tsx: to create a Stack Navigator for Home and Details screens

Inside the HomeStack.tsx file, add the following code snippet:

import * as React from 'react';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

import HomeScreen from '../screens/HomeScreen';
import DetailsScreen from '../screens/DetailsScreen';

const HomeStack = createNativeStackNavigator();

const HomeStackNavigator = () => {
  return (
    <HomeStack.Navigator>
      <HomeStack.Screen name="Home" component={HomeScreen} />
      <HomeStack.Screen name="Details" component={DetailsScreen} />
    </HomeStack.Navigator>
  );
};

export default HomeStackNavigator;

In the above code snippet, notice that the name prop on the HomeStack.Screen component is used to define the route name. For example, the DetailsScreen has the route name defined as Details. Any time you navigate the Details screen, the route name is used to identify the screen either in the navigation.navigate() or navigation.push() method.

Next, add the following code snippet to the index.tsx file:

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';

import HomeStackNavigator from './HomeStack';

const RootNavigator = () => {
  return (
    <NavigationContainer>
      <HomeStackNavigator />
    </NavigationContainer>
  );
};

export default RootNavigator;

Lastly, modify the App.tsx file to include the RootNavigator component:

import { StatusBar } from 'expo-status-bar';

import RootNavigator from './src/navigation';

export default function App() {
  return (
    <>
      <RootNavigator />
      <StatusBar style="auto" />
    </>
  );
}

The HomeStack navigator configuration is done. Next, run any of the following commands to see the navigator in action:

# for iOS
expo start --ios

# for Android
expo start --android

Here is the output you will get after this step:

Adding type checking for stack navigator

To type check route name and parameters in both the HomeStack and RootStack navigators, you need to create type mappings for each route name and params.

Start by creating a new file called types.ts inside the src/navigation/ directory. This file will contain mappings for all route names and route params. Throughout this tutorial, it is used to define types for each type of navigator.

Inside the file types.ts, define the types for the route names: Home and Details.

export type HomeStackNavigatorParamList = {
  Home: undefined;
  Details: {
    name: string;
    birthYear: string;
  };
};

A route name that doesn't have any parameters being passed is specified with undefined. So, for example, in the above snippet, the Home route name doesn't have any parameters being passed to it.

The Details route receives two parameters from the HomeScreen. This is why the mapping object contains two properties in the above snippet.

After creating the mappings, you must let the stack navigator know about them. Go back to the HomeStack.tsx file and inside it, import HomeStackNavigatorParamList. It is passed as a generic to the createNativeStackNavigator function.

// rest of the import statements remain same
import { HomeStackNavigatorParamList } from './types';

const HomeStack = createNativeStackNavigator<HomeStackNavigatorParamList>();

// rest of the code remains the same

Testing type checking and IntelliSense

All the configurations in the previous section will enable type checking for the HomeStack navigator. For example, in the HomeStack.tsx file, change the name of the Details to Detail.

<HomeStack.Screen name="Detail" component={DetailsScreen} />

After the modification, you will see a red squiggly line appears on the name prop.

If you hover over the name prop, it will show a similar error message like the following:

The HomeStack navigator expects a HomeStackNavigatorParamList type with either Home or Details.

Another advantage of type checking is that it provides intelliSense for navigator props (depending on which IDE or Code editor you are using). For large applications where there are a lot of screens, this helps. You do not have to remember each route params for every screen.

Adding type checks for screens

In this section, let's learn how to add type checking for the Home screen. It is the screen where an app user will interact with a button to navigate to the Details screen.

To add type checking for a screen, the first step is to use a generic type to define types for the individual screens. Each navigator pattern in React Navigation library exposes its generic type. For example, NativeStackNavigationProp is used for @react-navigation/native-stack. Import that in the types.ts file.

import type { NativeStackNavigationProp } from '@react-navigation/native-stack';

export type HomeStackNavigatorParamList = {
  Home: undefined;
  Details: {
    name: string;
    birthYear: string;
  };
};

export type HomeScreenNavigationProp = NativeStackNavigationProp<
  HomeStackNavigatorParamList,
  'Details'
>;

The NativeStackNavigationProp accept two parameters. The first is the type that maps the route names and their params. Hence, the navigator itself. The second is the name of the screen as a string that matches the route name from the first parameter. In the above code snippet, the first parameter is HomeStackNavigatorParamList, and the second parameter, in this case, can only be Details.

The second parameter of NativeStackNavigationProp represents that the Home screen gets only the described route name as a possibility that the Home screen can navigate to. If the second parameter is not defined, then the Home screen will get all the route names from the HomeStack navigator as possibilities that it can navigate to.

Now, open the HomeScreen file, import the HomeScreeProps type, and use it to annotate the useNavigation hook.

// after other import statements

// import HomeScreenNavigationProp
import { HomeScreenNavigationProp } from '../navigation/types';

// inside the HomeScreen, component modify the following line
const HomeScreen = () => {
  const navigation = useNavigation<HomeScreenNavigationProp>();

  // rest of the code remains the same
};

If you are using the navigation prop directly on the functional component, you can pass the HomeScreenNavigationProp type to the functional component.

function HomeScreen({ navigation }: HomeScreenNavigationProp) {
  // ...
}

If you are using @react-navigation/stack, you can use StackScreenProps instead of StackNavigationProp.

Adding type checks for route params

To add type checking for a screen that receives route params (for example, in the example app Details screen receives two route params), you need to import the RouteProp from @react-navigation/native.

After importing it, create a type for the Details screen using the HomeStackNavigatorParamList as the first parameter and the route name of the Details screen as the second parameter to the RouteProp.

// after other import statements
import type { RouteProp } from '@react-navigation/native';

export type DetailsScreenRouteProp = RouteProp<
  HomeStackNavigatorParamList,
  'Details'
>;

// rest of the code remains the same

Open the DetailsScreen file, import the DetailsScreenRouteProp type, and use it to annotate the useRoute hook.

// after other import statements
import { DetailsScreenRouteProp } from '../navigation/types';

// inside the DetailsScreen, the component modify the following line

const DetailScreen = () => {
  const route = useRoute<DetailsScreenRouteProp>();

  // rest of the code remains the same
};

Adding a bottom navigator

Let's continue the saga of adding type checks to the app screens by adding a Bottom Tab Navigator to the example app. We have already installed the bottom tabs package when creating the example app.

Let's add two more screens to the src/screens/ directory. Inside it, create a new file FeedScreen.tsx and add the following code snippet:

import { View, Text } from 'react-native';

const FeedScreen = () => {
  return (
    <View style={{ flex: 1, paddingTop: 12, paddingHorizontal: 10 }}>
      <Text style={{ fontSize: 18 }}>Feed Screen</Text>
    </View>
  );
};

export default FeedScreen;

Create another new file called SettingsScreen.tsx and add the following code snippet:

import { View, Text } from 'react-native';

const SettingsScreen = () => {
  return (
    <View style={{ flex: 1, paddingTop: 12, paddingHorizontal: 10 }}>
      <Text style={{ fontSize: 18 }}>Settings Screen</Text>
    </View>
  );
};

export default SettingsScreen;

Next, add the type check mapping objects for the bottom tab navigator in the src/navigation/types.ts file. The name of the navigator is BottomTabNavigatorParamList.

The bottom tab navigator will contain the Home screen as its first tab. The second tab will be the Feed screen. The third tab will be the Settings screen. You can specify HomeStackNavigatorParamList as the value for the Home key.

export type BottomTabNavigatorParamList = {
  Home: HomeStackNavigatorParamList;
  Feed: undefined;
  Settings: undefined;
};

Inside the src/navigation/ directory, add a new file called Tabs.tsx with the following code snippet:

import * as React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

import { BottomTabNavigatorParamList } from './types';
import HomeStackNavigator from './HomeStack';
import FeedScreen from '../screens/FeedScreen';
import SettingsScreen from '../screens/SettingsScreen';

const Tab = createBottomTabNavigator<BottomTabNavigatorParamList>();

const BottomTabs = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen
        name="HomeStack"
        component={HomeStackNavigator}
        options={{ headerShown: false }}
      />
      <Tab.Screen name="Feed" component={FeedScreen} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
    </Tab.Navigator>
  );
};

export default BottomTabs;

Annotating types for the bottom tab navigator with BottomTabNavigatorParamList, will add type checks for each screen in the tab navigator.

Let's also modify the src/navigation/index.tsx file to replace the previous HomeStack by importing the BottomTabs component and rendering it.

// rest of the import statements remain same
import BottomTabs from './Tabs';

const RootNavigator = () => {
  return (
    <NavigationContainer>
      <BottomTabs />
    </NavigationContainer>
  );
};

export default RootNavigator;

Here is the output you get after this step:

Composing nested navigator types

In the current state of the example app, you will notice that the HomeStack navigator is now nested inside the bottom tab navigator.

Let's assume, for some reason, you want to provide a button for the app user to navigate from the Home screen to the Feed screen. This is doable since both of these screens share the same parent navigator.

Add a button above the FlatList in the HomeScreen.tsx file that allows an app user to navigate to the Feed screen as shown below:

return (
  <View style={{ flex: 1, paddingTop: 10 }}>
    <Pressable
      onPress={() => navigation.navigate('Feed')}
      style={{
        padding: 8,
        borderWidth: 1,
        borderRadius: 4,
        borderColor: 'red',
        margin: 12,
        alignItems: 'center',
      }}
    >
      <Text style={{ fontSize: 16, fontWeight: '600' }}>Go to Feed screen</Text>
    </Pressable>
    <FlatList data={DATA} renderItem={renderListItems} />
  </View>
);

Here is how the button looks on the Home screen:

If you look closely at the JSX just added, a red squiggly line has appeared underneath Feed.

The error states that the Feed screen is not part of the HomeScreenNavigationProp, which is true because the Feed screen is not part of the param list we defined for the Home stack navigator in the src/navigation/types.tsx file.

React Navigation library exposes the CompositeNavigationProp type that allows annotating the navigation prop when nesting navigators. It takes two parameters. The first parameter is the primary navigator, in this case, the Home Stack navigator itself. The second parameter is the type of a parent navigator or any other source of secondary navigation. In this case, it will be the bottom tab navigator.

Modify the type HomeScreenNavigationProp as shown below:

import type {
  CompositeNavigationProp,
  RouteProp,
} from '@react-navigation/native';
// rest of the import statements remains same

export type HomeScreenNavigationProp = CompositeNavigationProp<
  NativeStackNavigationProp<HomeStackNavigatorParamList, 'Details'>,
  BottomTabNavigationProp<BottomTabNavigatorParamList, 'Feed'>
>;

// rest of the code remains the same

If you go back to the HomeScreen.tsx file, you will see the red squiggly gone.

Conclusion

In this tutorial, we discussed how to add type checks to the app screens and how to add type checks to the React Navigation navigators. Using type checks and annotating navigators is a great way to make your app more robust and maintainable when using TypeScript with React Navigation.

I recommend you check the complete type checking with TypeScript official documentation here provided by React Navigation library maintainers.

How To Use React Native AsyncStorage

Aman Mittal — Thu, 26 May 2022 10:42:03 +0000

AsyncStorage is a simple, asynchronous, unencrypted by default module that allows you to persist data offline in React Native apps. The persistence of data is done in a key-value storage system.

There are numerous scenarios where this module can be beneficial. Persisting data in a mobile app has benefits such as when the user restarts the app, the data or the setting variables being available to the user in the state they left before closing the app. This scenario is going to be covered in this tutorial.

Find the complete code for this tutorial at this GitHub repo.

Installing the community module

React Native version 0.60.0+ has lots of its API modules available as separate packages that you can easily install with a package manager such as npm or yarn. These packages are managed by community members as well as open-source developers.

To begin, let us create a new React Native project and install the module: @react-native-async-storage/async-storage. From a terminal window, execute the following commands in the order they are specified.



# create a new react-native app
npx react-native init rnAsyncStorageExample

# navigate inside the project directory
cd rnAsyncStorageExample

# install the async-storage module
yarn add @react-native-async-storage/async-storage

# Or is you prefer to use npm
npm install @react-native-async-storage/async-storage

If you are using the latest React Native version (0.60.x or above) you do not have to link the native binaries for iOS and Android platforms manually. This linking of the module is handled automatically by the CLI. Though, for iOS, you have to install cocoapods. Go back to the terminal window and execute the following command:



npx pod-install ios

That's it in terms of configuring the AsyncStorage module to work in the React Native app.

Changing the default storage limitation on Android

On iOS devices, the AsyncStorage is not limited programmatically.

On Android devices, by default, the current AsyncStorage size is set to 6MB. Reaching this limit is going to result in errors like the database or disk being full. There are valid reasons why this limit exists but if there is a need to increase the size, you can do that. Open the android/gradle.properties file and add the following:



AsyncStorage_db_size_in_MB=10

This file represents any project-wise settings that you can use to override the default values or settings.

Now, to make sure everything is working correctly, build the Android app (and make sure an Android device or emulator is running before you execute the command below).



npx react-native run-android

You are going to get the default screen that confirms that the app is configured.

Similarly, to build the app for iOS, execute the command below:



npx react-native run-ios

Using the AsyncStorage API

Let's start creating an example. In this example application, you will save a value from the user's input in the storage and fetch the value from the storage. This reading and writing of data are going to be done with the help of AsyncStorage API functions.

Open the App.js file and start by importing the following components.



import React, {useState, useEffect} from 'react';
import {
  StyleSheet,
  View,
  Text,
  TextInput,
  TouchableOpacity,
} from 'react-native';
import AsyncStorage from '@react-native-community/async-storage';

Next, define a variable name STORAGE_KEY. It is used to read and save the data. You can think of this key as the identifier to the value that is being stored, hence, the key-value storage system. As you are going to store only one value at the moment, there is only one key required.



let STORAGE_KEY = '@user_input';

Inside the functional component App, define a state variable input that has an empty string as its default value.



const App = () => {
  const [input, setInput] = useState('');
  // ...
};

export default App;

Saving the data

To save the data for the app to read, let us define an asynchronous helper method called saveData. This method is going to be promise-based, which means you can use the async await syntax with a try-catch block.

Passing the identifier STORAGE_KEY as well as the input state variable, the API method AsyncStorage.setItem is going to store the value in storage.

Let us update the state as well as display an alert box when the data is successfully stored.



const saveData = async () => {
  try {
    await AsyncStorage.setItem(STORAGE_KEY, age)
    alert('Data successfully saved')
  } catch (e) {
    alert('Failed to save the data to the storage')
  }
}const saveData = async () => {
  try {
    await AsyncStorage.setItem(STORAGE_KEY, age)
    alert('Data successfully saved')
  } catch (e) {
    alert('Failed to save the data to the storage')
  }
}

Reading the data

When the app restarts, it should be able to read the data that persisted in the previous section. For this, create another helper function called readData that is going to be asynchronous. This function is going to read the value from the storage using the API method AsyncStorage.getItem and will only set the value of the state variable input when its value is not null.



const readData = async () => {
  try {
    const value = await AsyncStorage.getItem(STORAGE_KEY);

    if (value !== null) {
      setInput(value);
    }
  } catch (e) {
    alert('Failed to fetch the input from storage');
  }
};

To retrieve the data whenever the app starts, invoke this method inside the useEffect hook.



useEffect(() => {
  readData();
}, []);

Clearing all storage

Another API method that the current demo app is going to utilize from the AsyncStorage API is called clear. This method deletes everything that was previously saved.

If you want to delete only a specific item from the storage, there are other methods available such as removeItem or multiRemove by the AsyncStorage API.

Add the following snippet:



const clearStorage = async () => {
  try {
    await AsyncStorage.clear();
    alert('Storage successfully cleared!');
  } catch (e) {
    alert('Failed to clear the async storage.');
  }
};

Controlling the input

The last two helper functions this example app requires are onChangeText and onSubmitEditing.

These methods are going to be responsible for reading the input and updating the state variable as well as storing the input.



const onChangeText = value => setInput(value);

const onSubmitEditing = () => {
  if (!input) return;

  saveData(input);
  setInput('');
};

Completing the app

We have defined all the helper functions that are required by the app. Let us complete the return statement by defining the JSX as below:



const App = () => {
  // ... rest of the code remains the same

  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <Text style={styles.title}>AsyncStorage React Native</Text>
      </View>
      <View style={styles.panel}>
        <Text style={styles.label}>Enter your input here:</Text>
        <TextInput
          style={styles.inputField}
          value={input}
          placeholder="Enter"
          onChangeText={onChangeText}
          onSubmitEditing={onSubmitEditing}
        />
        <Text style={styles.text}>Your input is {input}</Text>
        <Pressable onPress={clearStorage} style={styles.button}>
          <Text style={styles.buttonText}>Clear Storage</Text>
        </Pressable>
      </View>
    </View>
  );
};

Here are the corresponding styles to the above code snippet:



const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  header: {
    width: '100%',
    backgroundColor: '#dcdcdc',
    paddingTop: 48,
    paddingBottom: 10,
    borderBottomWidth: StyleSheet.hairlineWidth,
    alignItems: 'center',
  },
  title: {
    fontSize: 22,
    color: '#333',
    fontWeight: 'bold',
  },
  panel: {
    paddingTop: 10,
    paddingHorizontal: 10,
  },
  label: {
    fontSize: 20,
  },
  text: {
    fontSize: 24,
    paddingTop: 10,
  },
  inputField: {
    backgroundColor: '#fff',
    height: 44,
    borderWidth: 1,
    borderColor: '#333',
    width: '100%',
    padding: 10,
    marginTop: 12,
  },
  button: {
    margin: 10,
    padding: 10,
    backgroundColor: 'orange',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 4,
  },
  buttonText: {
    fontSize: 18,
    color: '#444',
  },
});

Now, go back to the iOS simulator and you are going to be welcomed by the following screen:

Next, enter a value, close the app, and then open the app to see if the value was stored or not.

Lastly, see what happens when you click on the "Clear Storage" button.

Conclusion

Congratulations! I hope that, in this tutorial, you learned the basic API methods of using AsyncStorage API in your React Native app. Even though the demo app was minimal, it allowed us to understand the concepts.

Here is the link to the complete API for the AsyncStorage module that you can refer to for further reading.

And speaking of further reading, don't miss our guide on React Native Security and our tutorial on protecting the source code of React Native apps against code tampering and reverse-engineering.

Working with Angular Local Storage

Jay — Tue, 10 May 2022 16:10:42 +0000

Storage means a space for putting things for future use. From a web application perspective, storage can be broadly classified into two types: server-side storage and client-side storage. Server-side storage points to the many different types of database storage like SQL, MYSQL, MongoDB, etc. Client-side storage means storing data in the browser itself so that it can be used when required without requesting the server-side database.

In this article, we'll discuss local storage and its usage from an Angular application's perspective. Let's start by trying to understand what local storage is.

What is Local Storage?

Local storage is client-side storage for web applications. It stays there as long as it's not cleared—unlike session storage, which lasts for the current browser tab session. Local storage provides up to 5MB of storage, allocated separately for each domain. For example, local storage for the website www.abc.com will be different from www.xyz.com.

Working with Local Storage

The local storage API provides a couple of methods to store, retrieve, remove and clear the storage. Let's see how to use these methods.

localStorage.setItem

The setItem method allows you to add a value to the local storage. It stores data using a key value pair. For example:

localStorage.setItem('token','xhja787')

The above code stores the data xhja787 in a key called token inside the browser local storage.

Note: localStorage only stores string values. To store objects or arrays, you need to use JSON.stringify to convert them into a string first.

Now, let's see how to access the stored data using getItem

localStorage.getItem

getItem allows you to read back the data saved in local storage using the same key. For example, to fetch the data stored using the key token, you can use the following method:

localStorage.getItem('token')

localStorage.removeItem

Once you are done using the data in the local storage, you can remove it using the removeItem method. For example:

localStorage.removeItem('token')

localStorage.clear

You can clear all of the data out of the local storage using the clear method to wipe the slate clean.

localStorage.clear()

Now that's all plain JavaScript code to access the local storage. Using local storage in Angular is no different. First, let’s create an Angular application and then we'll create a service wrapper on top of the localStorage API.

Creating the Angular App

You can create the Angular app using the Angular CLI.

ng new local-app

Once you have the Angular app, you can create an Angular service using the following command:

ng g service local

Let's add four wrapper methods to add, get, remove and clear storage. Here is how the service looks:

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

@Injectable({
  providedIn: 'root'
})
export class LocalService {

  constructor() { }

  public saveData(key: string, value: string) {
    localStorage.setItem(key, value);
  }

  public getData(key: string) {
    return localStorage.getItem(key)
  }
  public removeData(key: string) {
    localStorage.removeItem(key);
  }

  public clearData() {
    localStorage.clear();
  }
}

You can use the local service by injecting the service into your component. In this Angular example, to use the LocalService in the app.component.ts file, you need to inject it by importing it in AppComponent and creating an instance in the constructor method.

import { Component } from '@angular/core';
import { LocalService } from './local.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  constructor(private localStore: LocalService) {

  }
}

Local Storage Uses

Local storage can be used to store pretty much anything you like. It is most commonly used for storing JSON web tokens, user preferences and application settings such as themes.

How Secure is Local Storage?

When using local storage in Angular, the rule of thumb is to not store anything sensitive. Anything you store in local storage can be accessed by code in your browser. It's ok to store JSON web tokens since they’re already encrypted.

Another good rule of thumb is to encrypt the data before storing it in local storage and decrypt it when fetching from local storage. To encrypt and decrypt data in local storage, you can use a library such as crypto-js.

To use it, first install it in your Angular project using npm.

npm install crypto-js
npm i --save-dev @types/crypto-js

Once you have it installed, you can import the library in the LocalService.

import  *  as CryptoJS from  'crypto-js';

Add the following two methods to encrypt and decrypt text:

  private encrypt(txt: string): string {
    return CryptoJS.AES.encrypt(txt, this.key).toString();
  }

  private decrypt(txtToDecrypt: string) {
    return CryptoJS.AES.decrypt(txtToDecrypt, this.key).toString(CryptoJS.enc.Utf8);
  }

Now, you can use the above two methods to encrypt and decrypt before storing and fetching data from local storage.

  public saveData(key: string, value: string) {
    localStorage.setItem(key, this.encrypt(value));
  }

  public getData(key: string) {
    let data = localStorage.getItem(key)|| "";
    return this.decrypt(data);
  }

Here is how the complete local.service.ts file looks:

import { Injectable } from '@angular/core';
import * as CryptoJS from 'crypto-js';

@Injectable({
  providedIn: 'root'
})
export class LocalService {

  key = "123";

  constructor() { }

  public saveData(key: string, value: string) {
    localStorage.setItem(key, this.encrypt(value));
  }

  public getData(key: string) {
    let data = localStorage.getItem(key)|| "";
    return this.decrypt(data);
  }
  public removeData(key: string) {
    localStorage.removeItem(key);
  }

  public clearData() {
    localStorage.clear();
  }

  private encrypt(txt: string): string {
    return CryptoJS.AES.encrypt(txt, this.key).toString();
  }

  private decrypt(txtToDecrypt: string) {
    return CryptoJS.AES.decrypt(txtToDecrypt, this.key).toString(CryptoJS.enc.Utf8);
  }
}

Now, let's test this by storing some text in the local storage. In your app.component.ts file, import the LocalService and create an instance of it in the constructor. In ngOnInit, store the data in the local storage using the service method. Here is the app.component.ts file:

import { Component } from '@angular/core';
import { LocalService } from './local.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'local-app';
  constructor(private localStore: LocalService) {

  }

  ngOnInit(): void {
    this.localStore.saveData('id', 'jk123');
  }
}

Save the Angular app and run the application. After the app gets loaded, type in localStorage from the browser console and you will be able to see the encrypted data in local storage.

{
    "id": "U2FsdGVkX1+xovPDV0m0um6MPlrb+p5aG8Rb09TSWaM="
}

While trying to access the local storage data inside the application, you can get the decrypted data. For example, try to get the id data from local storage in ngOnInit.

  ngOnInit(): void {
    this.localStore.saveData('id', 'jk123');
    console.log('decrpted data ', this.localStore.getData('id'));
  }

You will be able to see the decrypted data in your browser console.

Wrapping it Up

In this tutorial, you learned about what localStorage is, how and when to use it, and how to encrypt and decrypt data on storing and fetching data respectively from localStorage.

We hope you liked this tutorial, and if you want to learn how you can secure your Angular source code against theft and reverse-engineering, be sure to check our guide.

Implementing Infinite Scroll with React Query and FlatList in React Native

Aman Mittal — Fri, 28 Jan 2022 12:48:48 +0000

Infinite Scrolling is a way to implement pagination in mobile devices. It is common among mobile interfaces due to the limited amount of space. If you use social media applications like Instagram or Twitter, this implementation is commonly used across those apps.

In this tutorial, let's learn how to implement an infinite scroll using the FlatList component in React Native. To fetch data, we will use a real REST API service provided by RAWG. It is one of the largest video game databases, and they have a free tier when it comes to using their API for personal or hobby projects.Then the React Query library will help us make the process of fetching data a lot smoother.

Prerequisites

To follow this tutorial, please make sure you have the following tools and utilities installed on your local development environment and have access to the services mentioned below:

Node.js version 12.x.x or above installed
Have access to one package manager such as npm or yarn or npx
RAWG API key

You can also check the complete source code for this example at this GitHub repo.

Creating a new React Native app

To create a new React Native app, let's generate a project using the create-react-native-app command-line tool. This tool helps create universal React Native apps, supports React Native Web, and you can use native modules. It is currently being maintained by the awesome Expo team.

Open up a terminal window and execute the following command:

npx create-react-native-app

# when prompted following questions
What is your app named? infinite-scroll-with-react-query
How would you like to start › Default new app

# navigate inside the project directory after it has been created
cd infinite-scroll-with-react-query

Then, let's install all the dependencies that will be used to create the demo app. In the same terminal window:

yarn add native-base react-query && expo install expo-linear-gradient react-native-safe-area-context react-native-svg

This command should download all the required dependencies. To run the app in its vanilla state, you can execute either of the following commands (depending on the mobile OS you're using). These commands will build the app.

# for iOS
yarn ios

# for android
yarn android

Creating a Home Screen

Let's create a new directory called /src. This directory will contain all the code related to the demo app. Inside it, create a sub-directory called /screens that will contain the component file, HomeScreen.js.

In this file, let's add some JSX code to display the title of the app screen.

import React from 'react';
import { Box, Text, Divider } from 'native-base';

export const HomeScreen = () => {
  return (
    <Box flex={1} safeAreaTop backgroundColor='white'>
      <Box height={16} justifyContent={'center'} px={2}>
        <Text fontSize={28} fontWeight={'600'} color={'emerald.500'}>
          Explore Games
        </Text>
      </Box>
      <Divider />
    </Box>
  );
};

The Box component from NativeBase is a generic component. It comes with many props, a few of them are to apply the SafeAreaView of the device. The prop safeAreaTop applies padding from the top of the device's screen. One advantage of using the NativeBase library is its built-in components provide props like handling safe area views.

Most NativeBase components also use utility props for most commonly used styled properties such as justifyContent, backgroundColor, etc., and shorthands for these utility props such as px for padding horizontally.

Setting up providers

Both the NativeBase and React Query libraries require their corresponding providers to be set up at the root of the app. Open the App.js file and add the following:

import React from 'react';
import { StatusBar } from 'expo-status-bar';
import { NativeBaseProvider } from 'native-base';
import { QueryClient, QueryClientProvider } from 'react-query';

import { HomeScreen } from './src/screens/HomeScreen';

const queryClient = new QueryClient();

export default function App() {
  return (
    <>
      <StatusBar style='auto' />
      <NativeBaseProvider>
        <QueryClientProvider client={queryClient}>
          <HomeScreen />
        </QueryClientProvider>
      </NativeBaseProvider>
    </>
  );
}

All the providers must wrap the entry point or the first screen of the application. In the above snippet, there is only one screen, so all the providers are wrapping HomeScreen.

The QueryClientProvider component provides an instance in the form of QueryClient that can be further used to interact with the cache.

After modifying the App.js file, you will get the following output on a device:

Add a Base URL to use RAWG REST API

If you want to continue reading this post and build along with the demo app, make sure you have access to the API key for your RAWG account. Once you've done that, create a new file called index.js inside the /src/config directory. This file will export the base URL of the API and API key.

const BASE_URL = 'https://api.rawg.io/api';
// Replace the Xs below with your own API key
const API_KEY = 'XXXXXX';

export { BASE_URL, API_KEY };

Replace the Xs in the above snippet with your own API key.

Fetching data from the API

To fetch the data, we will use the JavaScript fetch API method. Create a new file called index.js inside /src/api. It will import the base URL and the API key from the /config directory and expose a function that fetches the data.

import { BASE_URL, API_KEY } from '../config';

export const gamesApi = {
  // later convert this url to infinite scrolling
  fetchAllGames: () =>
    fetch(`${BASE_URL}/games?key=${API_KEY}`).then(res => {
      return res.json();
    })
};

Next, in the HomeScreen.js file, import the React Query hook called useQuery. This hook accepts two arguments. The first argument is a unique key. This key is a unique identifier in the form of a string, and it tracks the result of the query and caches it.

The second argument is a function that returns a promise. This promise is resolved when there is data or throws an error when there is something wrong when fetching the data. We've already created the promise function that fetches data asynchronously from the API's base Url in the form of gamesApi.fetchAllGames(). Let's import the gamesApi as well.

Inside the HomeScreen, let's call this hook to get the data.

import React from 'react';
import { Box, Text, FlatList, Divider, Spinner } from 'native-base';
import { useQuery } from 'react-query';

import { gamesApi } from '../api';

export const HomeScreen = () => {
  const { isLoading, data } = useQuery('games', gamesApi.fetchAllGames);

  const gameItemExtractorKey = (item, index) => {
    return index.toString();
  };

  const renderData = item => {
    return (
      <Text fontSize='20' py='2'>
        {item.item.name}
      </Text>
    );
  };

  return isLoading ? (
    <Box
      flex={1}
      backgroundColor='white'
      alignItems='center'
      justifyContent='center'
    >
      <Spinner color='emerald.500' size='lg' />
    </Box>
  ) : (
    <Box flex={1} safeAreaTop backgroundColor='white'>
      <Box height={16} justifyContent={'center'} px={2}>
        <Text fontSize={28} fontWeight={'600'} color={'emerald.500'}>
          Explore Games
        </Text>
      </Box>
      <Divider />
      <Box px={2}>
        <FlatList
          data={data.results}
          keyExtractor={gameItemExtractorKey}
          renderItem={renderData}
        />
      </Box>
    </Box>
  );
};

In the above snippet, take a note that React Query comes with the implementation of request states such as isLoading. The isLoading state implies that there is no data and is currently in the "fetching" state. To improve the user experience, while the isLoading state is true, a loading indicator or a spinner component can be displayed (as did in the above snippet using the Spinner component from NativeBase).

Here is the output after this step:

Adding pagination to the API request

The useInfiniteQuery hook provided by the React Query library is a modified version of the useQuery hook. In addition to the request states such as isLoading and data, it utilizes a function to get the next page number using getNextPageParam.

In the case of RAWG REST API, the data fetch on each request contains the following keys:

count: the total count of games.
next: the URL to the next page.
previous: the URL of the previous page. Is null if the current page is first.
results: the array of items on an individual page.

The key names next, and previous will depend on the response structure of the API request. Make sure to check your data response what are the key names and what are their values.

Currently, the API request made in the /api/index.js file does not consider the number of the current page. Modify as shown below to fetch the data based on the page number.

export const gamesApi = {
  // later convert this url to infinite scrolling
  fetchAllGames: ({ pageParam = 1 }) =>
    fetch(`${BASE_URL}/games?key=${API_KEY}&page=${pageParam}`).then(res => {
      return res.json();
    })
};

The addition &page=${pageParam} in the above snippet is how the getNextPageParam function will traverse to the next page if the current page number is passed in the request endpoint. Initially, the value of pageParam is 1.

Using useInfiniteQuery hook

Let's import the useInfiniteQuery hook in the HomeScreen.js file.

// rest of the import statements remain same
import { useInfiniteQuery } from 'react-query';

Next, inside the HomeScreen component, replace the useQuery hook with the useInfiniteQuery hook as shown below. Along with the two arguments, the new hook will also contain an object as the third argument. This object contains the logic to fetch the data from the next page using the getNextPageParam function.

The function retrieves the page number of the next page. It accepts a parameter called lastPage that contains the response of the last query. As per the response structure we discussed earlier in the previous section, check the value of lastPage.next. If it is not null, return the next page's number. If it is null, return the response from the last query.

const { isLoading, data, hasNextPage, fetchNextPage } = useInfiniteQuery(
  'games',
  gamesApi.fetchAllGames,
  {
    getNextPageParam: lastPage => {
      if (lastPage.next !== null) {
        return lastPage.next;
      }

      return lastPage;
    }
  }
);

Implementing infinite scroll on FlatList

In the previous snippet, the hasNextPage and the fetchNextPage are essential. The hasNextPage contains a boolean. If it is true, it indicates that more data can be fetched. The fetchNextPage is the function provided by the useInfiniteQuery to fetch the data of the next page.

Add a handle method inside the HomeScreen component called loadMore. This function will be used on the FlatList prop called onEndReached. This prop is called when the scroll position reaches a threshold value.

const loadMore = () => {
  if (hasNextPage) {
    fetchNextPage();
  }
};

Another difference between useInfiniteQuery and useQuery is that the former's response structure includes an array of fetched pages in the form of data.pages. Using JavaScript map function, get the results array of each page.

Modify the FlatList component as shown below:

<FlatList
  data={data.pages.map(page => page.results).flat()}
  keyExtractor={gameItemExtractorKey}
  renderItem={renderData}
  onEndReached={loadMore}
/>

Here is the output after this step. Notice the scroll indicator on the right-hand side of the screen. As soon as it reaches a little below half of the list, it repositions itself. This repositioning indicates that the data from the next page is fetched by the useInfiniteQuery hook.

The default value of the threshold is 0.5. This means that the loadMore will get triggered at the half-visible length of the list. To modify this value, you can add another prop, onEndReachedThreshold. It accepts a value between 0 and 1, where 0 is the end of the list.

<FlatList
  data={data.pages.map(page => page.results).flat()}
  keyExtractor={gameItemExtractorKey}
  renderItem={renderData}
  onEndReached={loadMore}
  onEndReachedThreshold={0.3}
/>

Display a spinner when fetching next page data

Another way to enhance the user experience is when the end of the list is reached, and the data of the next page is still being fetched (let's say, the network is weak). While the app user waits for the data, it is good to display a loading indicator.

The useInfiniteQuery hook provides a state called isFetchingNextPage. Its value will be true when the data from the next page is fetched using fetchNextPage.

Modify the HomeScreen component as shown below. The loading spinner renders when the value of isFetchingNextPage is true. The ListFooterComponent on the FlatList component is used to display the loading indicator at the end of the list items.

export const HomeScreen = () => {
  const { isLoading, data, hasNextPage, fetchNextPage, isFetchingNextPage } =
    useInfiniteQuery('games', gamesApi.fetchAllGames, {
      getNextPageParam: lastPage => {
        if (lastPage.next !== null) {
          return lastPage.next;
        }

        return lastPage;
      }
    });

  const loadMore = () => {
    if (hasNextPage) {
      fetchNextPage();
    }
  };

  const renderSpinner = () => {
    return <Spinner color='emerald.500' size='lg' />;
  };

  const gameItemExtractorKey = (item, index) => {
    return index.toString();
  };

  const renderData = item => {
    return (
      <Box px={2} mb={8}>
        <Text fontSize='20'>{item.item.name}</Text>
      </Box>
    );
  };

  return isLoading ? (
    <Box
      flex={1}
      backgroundColor='white'
      alignItems='center'
      justifyContent='center'
    >
      <Spinner color='emerald.500' size='lg' />
    </Box>
  ) : (
    <Box flex={1} safeAreaTop backgroundColor='white'>
      <Box height={16} justifyContent={'center'} px={2}>
        <Text fontSize={28} fontWeight={'600'} color={'emerald.500'}>
          Explore Games
        </Text>
      </Box>
      <Divider />
      <Box px={2}>
        <FlatList
          data={data.pages.map(page => page.results).flat()}
          keyExtractor={gameItemExtractorKey}
          renderItem={renderData}
          onEndReached={loadMore}
          onEndReachedThreshold={0.3}
          ListFooterComponent={isFetchingNextPage ? renderSpinner : null}
        />
      </Box>
    </Box>
  );
};

Here is the output:

Wrapping up

In this tutorial, you've successfully implemented infinite scroll using useInfiniteQuery from React Query. Using this library for fetching and managing data inside a React Native app takes away a lot of pain points. Make sure to check out the Infinite Queries documentation here.

You can also check the complete source code for this example at this GitHub repo.

Finally, don't forget to pay special attention if you're developing commercial React Native apps that contain sensitive logic. You can protect them against code theft, tampering, and reverse engineering by following our guide.

How To Protect Your Code While Using Gulp

Jscrambler — Mon, 20 Dec 2021 10:00:24 +0000

As the web development ecosystem grew, with frameworks and libraries becoming the status quo, build tools quickly became an essential part of the dev toolchain. Gulp has been one of the most widely adopted task runners, as it provides lots of flexibility to automate and enhance dev workflows, especially through the use of plugins.

Gulp Overview

Gulp is a platform-agnostic toolkit that can be used to automate time-consuming tasks in a development workflow.

All tasks performed by Gulp are configured inside a file named Gulpfile.js and these can be written in vanilla JS, with Node modules, and also using a series of Gulp APIs such as src(), dest(), series() and parallel().

When the gulp command is run, each Gulp task is triggered as an asynchronous JavaScript function. For more information about Gulp tasks, please see the official documentation.

Setting Up a Simple App Which Uses Gulp

For the purposes of this tutorial, we will create a very simple application built with Node.js and Express. First, let's kick off a project:

npm init

When prompted, choose whichever defaults you prefer. Once that’s done, install Express:

npm install express --save

Then, let's create an app.js file in our project's root folder with the following code, provided in the Express website:

const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

This app starts a server and listens on port 3000 for connections. The app responds with “Hello World!” for requests to the root URL (/) or route.

Now, let’s install Gulp as a dev dependency:

npm install gulp --save-dev

And then let’s create a Gulpfile.js file in our project’s root folder containing the following boilerplate configuration (which will be used only in the next section):

function defaultTask(cb) {
  // place code for your default task here
  cb();
}

exports.default = defaultTask

Now, let’s run the Node app with:

node app.js

We will see a "Hello World" message on localhost:3000.

How to Configure Jscrambler

Let's begin by getting a ready-to-use file with our intended Jscrambler configuration.

If you haven't created a Jscrambler account yet, be sure to do so before moving forward.

Log into the Jscrambler Web App. Once there, create a new app. Now, it's time to pick the Jscrambler transformations that we want to use. We can pick them one-by-one in the Fine-Tuning tab but, in our case, let's go ahead to the Templates tab and pick the Obfuscation template. If you need help with these steps, please refer to our guide.

Now, we simply have to download a JSON file with all this configuration, which will be used only for quickly getting the required settings.

Now that you have the file with the needed configuration, you can integrate Jscrambler with Gulp.

Let’s install the Jscrambler Gulp plugin:

npm install gulp-jscrambler --save-dev

Now, we need to add the configurations we need to get Jscrambler working with Gulp. To do this, we will need some parts of the jscrambler.json file we downloaded earlier: accessKey, secretKey, applicationId, and the params array.

Our final gulpfile.js file should look like this:

var gulp = require('gulp');
var jscrambler = require('gulp-jscrambler');

gulp.task('default', function (done) {
  gulp
    .src('app.js')
    .pipe(jscrambler({
      keys: {
        accessKey: 'YOUR_ACCESS_KEY',
        secretKey: 'YOUR_SECRET_KEY'
      },
      applicationId: 'YOUR_APPLICATION_ID',
      params: [
        {
            "name": "objectPropertiesSparsing"
          },
          {
            "name": "variableMasking"
          },
          {
            "name": "whitespaceRemoval"
          },
          {
            "name": "identifiersRenaming",
            "options": {
              "mode": "SAFEST"
            }
          },
          {
            "name": "dotToBracketNotation"
          },
          {
            "name": "stringConcealing"
          },
          {
            "name": "functionReordering"
          },
          {
            "options": {
              "freq": 1,
              "features": [
                "opaqueFunctions"
              ]
            },
            "name": "functionOutlining"
          },
          {
            "name": "propertyKeysObfuscation",
            "options": {
              "encoding": [
                "hexadecimal"
              ]
            }
          },
          {
            "name": "regexObfuscation"
          },
          {
            "name": "booleanToAnything"
          }
        ]
    }))
    .pipe(gulp.dest('dist/'))
    .on('end', done);
});

If we take a closer look at this file, we'll see that src specified the path to the files that Jscrambler will use. At the bottom of the file, .pipe(gulp.dest('dist/')) places the protected version on the dist/ folder. You can change these to match your project's requirements.

Now, all that's left is to make sure that our build process is using Gulp. In our case, we must make sure that there's a script in our package.json file to build our app using Gulp:

"scripts": {
    "build": "gulp"
  },

We're now ready to run our build:

npm run build

That's it! Now we have our protected build files. If we check our /dist/app.js file, we will see that it has been obfuscated with Jscrambler.

Conclusion

Using a task runner like Gulp has become a must for web developers. Even though build tools like webpack have been seeing more traction these days, Gulp is still widely used—according to the 2020 State of JavaScript survey, it is the second most popular build tool for JS, used by 65% of respondents.

As we saw in this tutorial, integrating Jscrambler with Gulp is a straightforward process, thanks to the Jscrambler Gulp plugin. With this integration, you can automatically protect the source code in each new build and ensure that you are minimizing your app’s exposure to abuse, reverse engineering, licensing violations, and code tampering.

This all comes with premium support, so be sure to contact us if you have any questions!

Implementing Angular Lazy Loading

Jay — Mon, 29 Nov 2021 14:25:36 +0000

When your Angular application loads, all the application modules are loaded whether they’re required or not. Now, it may not sound like much of an issue if the application is a small one but as its modules eventually grow it will slow down the entire application.

The answer to this problem is found through Lazy loading which is the technique to initially load only the required modules and to load the other modules only when they are actually required.

From the official docs,

By default, NgModules are eagerly loaded, which means that as soon as the application loads, so do all the NgModules, whether or not they are immediately necessary. For large applications with lots of routes, consider lazy loading—a design pattern that loads NgModules as needed. Lazy loading helps keep initial bundle sizes smaller, which in turn helps decrease load times.

Advantages of Lazy loading

Lazy loading loads the resource as and when required, which results in:

Faster page loads
Better user experience
Bandwidth conservation

Now let's see the lazy loading in action.

Implementing Lazy Loading

Creating Angular app

Start by creating an Angular app using the Angular CLI.

ng new angular-app

Say yes to creating Angular routing and add the CSS stylesheet format.

Once the application is created, navigate to the project directory and run the application.

cd angular-app
npm start

You will be able to see the Angular app up and running.

Our application will have two modules, the Dashboard module, and the Home module. By default, you'll be loading the App module. The Home module and the Dashboard module will come into the picture when clicking the links in the App module.

Creating the Dashboard Module

From your application root directory, execute the following command to create the Dashboard module.

ng g module dashboard --routing

The above command creates the dashboard module. --routing option creates the routing configuration for the module. Once the module command is executed you can check the application src/app folder, it will contain a dashboard folder for the Dashboard module. Inside the folder there will also be a file called dashboard-routing.module for routing specific to the module.

Now navigate to the dashboard module folder and create a component for the module.

cd .\src\app\dashboard\
ng g component chart

Modify the dashboard-routing.module file by adding the default route for the module which points to the Chart component. Here is how the file looks:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ChartComponent } from './chart/chart.component';

const routes: Routes = [
  {path: '', component: ChartComponent},
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class DashboardRoutingModule { }

Add the following HTML to the chart.component.html file.

<h4>
    Welcome Dashboard
</h4>

Creating the Home Module

Let's create the Home module. From the project root directory execute the following command:

ng g module home --routing

The above command creates the Home module with routing configuration.

Create a component inside the Home module by navigating to the Home module folder.

cd .\src\app\home\  
ng g component userHome

Modify the home-routing.module.ts file to set the default route to the UserHomeComponent. Here is the home-routing.module.ts file:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { UserHomeComponent } from './user-home/user-home.component';

const routes: Routes = [
  {path: '', component: UserHomeComponent},
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class HomeRoutingModule { }

Let's add the following HTML to the user-home.component.html file.

<h4>
    Welcome Home
</h4>

Add the following HTML to the app.component.html file:

<h2>
  Welcome to course !!
</h2>
<a [routerLink]="'home'">Go to Home</a>
<a [routerLink]="'dashboard'">Dashboard</a>
<router-outlet></router-outlet>

Without Lazy Loading

Add the component references to the app.module.ts file:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ChartComponent } from './dashboard/chart/chart.component';
import { UserHomeComponent } from './home/user-home/user-home.component';

@NgModule({
  declarations: [
    AppComponent,
    ChartComponent,
    UserHomeComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Add the required routes to the app-routing.module.tsfile:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ChartComponent } from './dashboard/chart/chart.component';
import { UserHomeComponent } from './home/user-home/user-home.component';

const routes: Routes = [
  {path: 'dashboard', component: ChartComponent},
  {path: 'home',component : UserHomeComponent}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

So as seen in the above Routes, a request to the /dashboard takes you to the ChartComponent in the DashboardModule and a request to the /home routes takes you to the UserHomeComponent.

Save the above changes and start the Angular application. On the default page, you'll be able to see two links to the home and to the dashboard respectively. If you click on either of the two links it takes you to the respective module.

If you check the console, you can see that the size of the main.js file is 15.4KB. That is all the component data that is being loaded. If you notice, we don't need the Dashboard module and the Home module on the initial load. You only need them once you click on their particular links.

Now let's see how to achieve that using lazy loading.

Lazy Loading

To lazy load the modules, go to the app-routing.module.ts file and use loadChildren. You don't need to import the module in the app-routing.module.ts but it will get imported dynamically during runtime.
Here is how the app-routing.module.ts file looks:

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

const routes: Routes = [
  {path: 'home', loadChildren: () => import('./home/home.module').then(m => m.HomeModule)},
  {path: 'dashboard', loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule)}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Modify the app.module.ts to remove the Chart component and UserHome component imports.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Save the changes and load the application. Now if you check the browser console on initial load the size of main.js has been reduced to 11.4KB.

If you click on any of the links you can see that the respective module file is loaded on demand. Please check the file indicated in red. It wasn’t there in the initial load.

Conclusion

Lazy loading is an important Angular feature that helps to reduce the initial load time since it loads only the necessary files first. Other required modules are loaded on demand when you navigate to their particular route.

Now, you can take adavantage of this feature to improve your app's load time. And lastly, if you want to learn how you can secure your Angular source code against theft and reverse-engineering, be sure to check our guide.

The source code from this tutorial is available on GitHub.

Preventing Intellectual Property Theft with Jscrambler

Jscrambler — Thu, 25 Nov 2021 10:43:07 +0000

What is intellectual property theft?

Intellectual property theft (also called IP theft) refers to someone illegitimately taking possession of someone else’s proprietary inventions or developments. In the context of business, and specifically in IT, IP theft typically refers to a competitor or malicious actor getting access to trade secrets or proprietary algorithms to be used to the thief's own advantage.

The acceleration of digital transformation, which was exacerbated by the Covid pandemic, has stimulated the development of new technologies, consequently increasing the value of companies’ intellectual property.

This, of course, creates a huge opportunity for attackers and scammers. We have witnessed copycat apps going rampant in app stores and stealing business away from original developers, as well as fake Covid tracking apps mimicking official government apps and installing malware on the user’s device.

Looking at past attacks, it becomes clear that most intellectual property theft occurs in geographies with ambiguous IP laws, which makes enforcement extremely difficult. But even though tackling this problem is no easy task, prevention is considerably more beneficial for businesses than remediation.

Consequences of intellectual property theft

The Commission on the Theft of American Intellectual Property points out in their IP commission Report that IP theft ends up costing affected companies around $225 billion to $600 billion. While this figure will vary substantially from case to case and the indirect damages are extremely difficult to estimate, it’s simple enough to understand the potential damages in specific examples.

In the case of copycat applications, for instance, malicious actors typically steal the whole source code of the application and deploy it posing as a legitimate app. They may then monetize the application, taking advantage of the leniency that app stores are displaying, failing to crack down on copycats.

Here, there’s a direct impact on the affected business with the loss of revenue. The vast majority of users aren't able to differentiate between an original app and a copycat, and so while the app remains available on app stores (which can go on for months), the copycat app will be diverting sales. In some cases, the copycat app can also be used to distribute malware, jeopardizing the reputation of the company.

A second example of IP theft relates to a competitor wanting to retrieve a proprietary algorithm. In highly competitive sectors such as E-Commerce, companies invest heavily in specialized algorithms to improve their conversion rate. Competitors may go through the app’s source code to analyze the logic of these algorithms, allowing them to mimic their behavior and utilize it for their own gain. As a result, the company that originally developed the algorithm will lose a competitive advantage that could translate into millions of dollars in revenue.

How to prevent intellectual property theft with Jscrambler

In order to prevent intellectual property theft in web and mobile applications, businesses need to adopt adequate measures to secure their intellectual property (i.e. their source code). But how exactly can they secure it?

To make this easier to digest, let’s pick up our previous two examples: copycat applications and a competitor trying to retrieve a proprietary algorithm.

Tip: For a hands-on experience, feel free to try the code protection measures we will explore below on your own code by using a Jscrambler free trial.

Stopping copycat applications

In the case of copycat apps, as we saw, malicious actors will try to get access to the source code of the original application in order to copy it and benefit from it. So, to prevent that, businesses need to focus on adding strong protection to their source code to stop those malicious actors from ever being able to understand or replicate the code’s logic.

The answer to this is applying code obfuscation along with other code protection techniques that can be used to stop third parties from trying to reuse the code. This is actually a security recommendation by OWASP, precisely because of the underlying dangers of having exposed code.

So, the first step to stop copycats would be to conceal the code using JavaScript obfuscation, which includes a series of code transformations that turn the otherwise exposed code into a protected version that is extremely hard to understand and reverse-engineer. But to make the concealed code effectively safe from copycats, obfuscation alone isn't enough—an obfuscated app will run just like the original code, so copycats could just replicate that code. This is why simple obfuscation tools fail the purpose of actually making it hard for copycats to create app replicas.

Jscrambler provides copycat protection by applying additional strong code protection techniques on top of the obfuscation, namely Code Locks and the Self Defending layer.

Code Locks are especially useful against copycats because they provide control over the environment where the code is allowed to run. A date lock, for example, automatically “expires” the code after a certain time, meaning that copycats would have to continuously retrieve fresh batches of code to avoid having broken apps. A browser or domain lock, on the other hand, allow locking the original code to certain browsers or domains, which prevents the copycat from actually running.

In case the copycats attempt debugging the code to try and learn how the application works, Jscrambler’s Self-Defending feature protects functions and object literals—concealing their logic—and detects debuggers to trigger defenses that thwart reverse engineering attempts.

Stopping a competitor from retrieving a proprietary algorithm

When it comes to valuable proprietary algorithms, competitors may want to try and retrieve the source code that contains them to use it to their own advantage. To prevent that, as we saw in our previous example, we need to protect the source code.

Let’s take a look at the example code below. It’s an algorithm that recommends products based on the customer’s previous purchase history.

Now, if this were a proprietary algorithm, naturally, we would not want to leave that code exposed to our competitors. Simply by analyzing this code, they could potentially replicate the algorithm altogether. So, our first step would be to conceal all this logic with JavaScript obfuscation, taking advantage of Jscrambler’s several transformations.

In the code snippet above, we can see the results of using Jscrambler’s Control Flow Flattening transformation. It flattens the flow of the program by removing the natural conditional constructs that make the code easier to read. As a result of this single transformation, the code is already extremely hard to understand and reverse-engineer.

However, applying a single transformation would not be enough to fully protect the code from competitors’ eyes. Specifically, the Control Flow Flattening transformation used above doesn’t change any of the names, numbers, or strings that are used in the original algorithm, as we can see below.

As such, with Jscrambler we can combine several different transformations, including string concealing and variable masking, to completely conceal all the logic of the source code and prevent competitors from being able to retrieve any useful information.

Continuing the previous example, after adding 11 different obfuscation transformations from Jscrambler, we get completely unreadable code that is extremely difficult to reverse-engineer, both by humans and reverse-engineering tools.

But if you’re truly motivated about protecting your intellectual property and keeping your algorithms safe from prying eyes, you would still want to raise the bar even higher to stop reverse engineering attempts. By employing Jscrambler’s Self-Defending feature, your protected code will effectively mitigate any debugging or tampering attempt by triggering countermeasures at runtime, preventing dynamic code analysis. And since this is added on top of the potent obfuscation we saw before, it will also prevent static code analysis, leaving competitors completely locked out.

Finally, in case you’re only concerned about protecting specific algorithms throughout your source code, you can easily apply Jscrambler’s protection to these specific parts by using our Code Annotations feature.

Final Thoughts

As businesses become more digital, and as the competition grows, the need to stand out is often translated into innovative digital products. Naturally with innovation, and digital innovation specifically, we see Intellectual Property theft becoming more prevalent.

With that, come the consequences IP Theft brings to businesses, which shine a light on the fact that the cost of preventing it from ever unfolding is nowhere near the cost of trying to pick up the pieces afterwards.

So, to protect their innovative proprietary algorithms, companies must protect their source code with strong obfuscation transformations, code locks, and runtime protection. Jscrambler provides cutting-edge protection that, unlike simple obfuscation tools, is resilient to reverse-engineering both by humans and reverse engineering tools, ensuring that the code is kept away from prying eyes and can’t be redistributed.

Secure your JavaScript source code against theft and reverse-engineering, with a Jscrambler trial for free.

How to add a Splash Screen and an App Icon in React Native

Aman Mittal — Tue, 16 Nov 2021 18:21:06 +0000

Every mobile application has a splash screen and an app icon, and together they provide the first impression. An app icon is displayed in various places, such as on an app store, on the device's app drawer, etc., whereas a splash screen is shown during the app startup. Adding a splash screen or an app icon to a React Native app can be an agile process.

In this tutorial, let's learn how to use an awesome package called react-native-bootsplash to display a splash screen when an app starts and then learn the process of adding app icons in a React Native app.

Prerequisites

To follow this tutorial, please make sure you have the following tools and utilities installed on your local development environment and have access to the services mentioned below:

Node.js version 12.x.x or above installed
Have access to one package manager such as npm or yarn or npx
react-native-cli installed, or use npx

Note, the example app is created using React Native version 0.65.x.

Complete source code for this example is at this GitHub repo

Setup a React Native app

As an example for this tutorial, we will use a React Native project with two screens and React Navigation integrated.

To create a new React Native project and install the react-navigation dependencies, run the following command from the terminal window:

npx react-native init myAwesomeApp

# after the project directory is created
# navigate inside the directory
# and install the following dependencies

yarn add @react-navigation/native @react-navigation/native-stack react-native-safe-area-context react-native-screens

Inside src/ directory, create a new directory called navigation/ with a new file named RootNavigator.js. Add the following code to use the stack navigation pattern inside this file:

import * as React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';

import HomeScreen from '../screens/HomeScreen';
import DetailScreen from '../screens/DetailScreen';

const Stack = createNativeStackNavigator();

const RootNavigator = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator screenOptions={{headerShown: false}}>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default RootNavigator;

Modify the App.js file:

import React from 'react';

import RootNavigator from './src/navigation/RootNavigator';

const App = () => {
  return <RootNavigator />;
};

export default App;

Now, let’s create two new screens. Start by creating a new directory called src/screens/ and inside it, add the first file with the name HomeScreen.js and with the following code snippet:

import React from 'react';
import {View, Text, StyleSheet, Pressable} from 'react-native';

const HomeScreen = ({navigation}) => {
  return (
    <View style={styles.screenContainer}>
      <Text style={styles.title}>Home Screen</Text>
      <Pressable
        style={styles.buttonStyle}
        onPress={() => navigation.navigate('Details')}>
        <Text style={styles.buttonTextStyle}>Go To Detail Screen</Text>
      </Pressable>
    </View>
  );
};

const styles = StyleSheet.create({
  screenContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
  title: {
    fontSize: 32,
  },
  buttonStyle: {
    height: 54,
    width: '80%',
    marginTop: 32,
    borderRadius: 8,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#2EE59D',
    shadowRadius: 5,
    shadowOpacity: 0.7,
    shadowColor: 'rgba(46, 229, 157, 0.5)',
    shadowOffset: {
      width: 0,
      height: 3,
    },
  },
  buttonTextStyle: {
    color: '#fdfdfd',
    fontWeight: '700',
  },
});

export default HomeScreen;

Now, add the second screen component file, DetailScreen.js, and the following code snippet:

import React from 'react';
import {View, Text, StyleSheet, Pressable} from 'react-native';

const DetailScreen = ({navigation}) => {
  return (
    <View style={styles.screenContainer}>
      <Text style={styles.title}>Detail Screen</Text>
      <Pressable
        style={styles.buttonStyle}
        onPress={() => navigation.navigate('Home')}>
        <Text style={styles.buttonTextStyle}>Go To Home Screen</Text>
      </Pressable>
    </View>
  );
};

const styles = StyleSheet.create({
  screenContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
  title: {
    fontSize: 32,
  },
  buttonStyle: {
    height: 54,
    width: '80%',
    marginTop: 32,
    borderRadius: 8,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#2EE59D',
    shadowRadius: 5,
    shadowOpacity: 0.7,
    shadowColor: 'rgba(46, 229, 157, 0.5)',
    shadowOffset: {
      width: 0,
      height: 3,
    },
  },
  buttonTextStyle: {
    color: '#fdfdfd',
    fontWeight: '700',
  },
});

export default DetailScreen;

With the boilerplate setup done, now let’s build the apps for iOS and Android.

For iOS, run the following command:

npx react-native run-ios

For Android, run the following command:

npx react-native run-android

Here is what the example app looks like in its current form. Notice that the splash screen and the app icon are defaults that come with React Native.

We are picking an icon from Flaticon.com for the example app.

After creating the original app icon, save it inside the directory src/assets/ and name the file original_icon. (Note: you can name the original icon file as per your requirement).

Tip: Make sure your initial app logo is 1024x1024px.

Installing react-native-bootsplash

The initial step is to install the react-native-bootsplash package and then generate assets using it.

Open the terminal window and execute the following command to install the package:

yarn add react-native-bootsplash

# or if using npm
npm install react-native-bootsplash

Next, for iOS, execute the command to install pods.

npx pod-install ios

Tip: If you use a React Native version lower than 0.60, please follow the instructions here to link the package manually.

Next, add the following script in the package.json file under the "scripts" section:

"scripts": {
  "generate": "npx react-native generate-bootsplash ./src/assets/original_icon.png --background-color=2EE59D   --logo-width=100 --assets-path=./src/assets --flavor=main"
}

Here is each option described:

generate-bootsplash is the command to generate the assets.
./src/assets/original_icon.png is the path to the original icon file. The path may vary depending on where you save the file in your React Native project.
--background-color=hexadecimal_value is a color value in hexadecimal format. The color here is used as the background color of the splash screen.
--logo-width=100 is the width of the logo. This is a default value provided by the package
assets-path is the path to the assets directory.
flavor is an Android only option. Let's pass the value main here to target the default version of the Android app. You can learn more about Build Variants on Android here.

This will generate assets in the path specified for the option assets-path, a storyboard called BootSplash.storyboard file inside the ios/app-name directory, as well as generate assets for the Android app inside different sub-directories of the android/app/src/main/res folder.

Android requires five different sizes for different screen pixel densities. Icons for lower resolution are created automatically from the baseline (mdpi). Refer to the table below for more information on pixel densities:

Resolution	Density	Pixel units
mdpi (Baseline)	160 dpi	1×
hdpi	240 dpi	1.5×
xhdpi	320 dpi	2×
xxhdpi	480 dpi	3×
xxxhdpi	640 dpi	4×

Adding splash screen on iOS

Start by opening the file ios/app-name.xcodeproj in Xcode.

Then, drag the file BootSplash.storyboard under the Project directory in the Xcode file manager on the left side of the Xcode from the path ios/app-name/ directory.

After dragging it, Xcode will prompt the following to create a folder reference. First, make sure that under the Add to targets option, the app-name is selected. Then click the Finish button.

The BootSplash.storyboard file will now be represented in the file manager as shown below:

Click on the BootSplash.storyboard file to verify that the background color was added when generating assets.

Select the Xcode project from the file manager and select BootSplash from the dropdown menu next to Launch Screen File.

Now, open the ios/app-name/AppDelegate.m file and add the import to the following header reference:

#import "AppDelegate.h"

#import <React/RCTBridge.h>
#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>

#import "RNBootSplash.h" // <- add this

In the same file, add the following line to initialize the BootSplash.

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  // ... other statements
   [RNBootSplash initWithStoryboard:@"BootSplash" rootView:rootView];
  return YES;
}

Adding splash screen on Android

Start by modifying the android/app/src/main/java/com/app-name/MainActivity.java file.

package com.rnsplashandiconexample;

import com.facebook.react.ReactActivity;

// ----- Add the following imports --------
import android.os.Bundle;
import com.zoontek.rnbootsplash.RNBootSplash;

public class MainActivity extends ReactActivity {

  /**
   * Returns the name of the main component registered from JavaScript. This is used to schedule
   * rendering of the component.
   */
  @Override
  protected String getMainComponentName() {
    return "rnSplashAndIconExample";
  }

  // ----- Add the following --------
  @Override
    protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    RNBootSplash.init(R.drawable.bootsplash, MainActivity.this);
  }
}

Then, modify the android/app/src/main/res/values/styles.xml file:

<resources>

    <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
        <item name="android:textColor">#000000</item>
    </style>

    <!-- Add the following lines (BootTheme should inherit from AppTheme) -->
    <style name="BootTheme" parent="AppTheme">
      <!-- set the generated bootsplash.xml drawable as activity background -->
      <item name="android:background">@drawable/bootsplash</item>
    </style>

</resources>

Next, modify the android/app/src/main/AndroidManifest.xml file by removing the original <intent-filter> tag and its contents. Replace it by adding android:exported="true" and create a new activity element to use the theme created in the previous step.

<activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
        android:launchMode="singleTask"
        android:windowSoftInputMode="adjustResize"
        android:exported="true">  <!--- Add this -->
</activity>

<!-- Then, add the following lines -->
<activity
      android:name="com.zoontek.rnbootsplash.RNBootSplashActivity"
      android:theme="@style/BootTheme"
      android:launchMode="singleTask">
      <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
      </intent-filter>
</activity>

Control how to display a splash screen when the navigator is mounted

You can control the behavior of the splash screen to display until all the children of the React Navigation's NavigationContainer are mounted for the first time. This can be done by using a prop on the NavigationContainer called onReady.

Modify the RootNavigator.js file by importing the react-native-bootsplash and adding the prop onReady.

// after other import statements
import RNBootSplash from 'react-native-bootsplash';

const RootNavigator = () => {
  return (
    <NavigationContainer onReady={() => RNBootSplash.hide()}>
      {/* Rest remains same */}
    </NavigationContainer>
  );
};

Testing the splash screen configuration

The last step to see the splash screen in action is to run the build command for both iOS and Android.

Open the terminal window and run the command to build the app for iOS and Android:

# for iOS
npx react-native run-ios

# for Android
npx react-native run-android

Here is the output after this step:

Adding app icon to iOS app

To generate assets for different iOS devices, I am using a free app icon generator called appicon.co.

After generating all the image assets, you will be able to download them in a zip file.

Uploading an app icon for iOS follows the same process as using native iOS development. Open the file ios/app-name.xcodeproj in Xcode. Select the Image.xcassets from the file manager. Then select the AppIcon.

Drag and drop all the required image assets after downloading and unzipping them from appicon.co. Place the images as per the necessary pixel densities. After you are done, here is how the Xcode might look like:

Open a terminal window and run the command to build an app for iOS:

npx react-native run-ios

After the rebuild, the app icon will display.

Adding app icon to Android app

The leverage react-native-bootsplash package generates all the app icons for Android and stores them in the multiple sub-directories under the android/app/src/main/res directory.

The simple way here is to replace the default values for the properties android:icon and android:roundIcon in the android/app/src/main/AndroidManifest.xml file to point to the bootsplash_logo file name.

 <application
      android:name=".MainApplication"
      android:label="@string/app_name"
      // modify the two lines below
      android:icon="@mipmap/bootsplash_logo"
      android:roundIcon="@mipmap/bootsplash_logo"
      // ----------------------------
      android:allowBackup="false"
      android:theme="@style/AppTheme">

After this modification, rebuild the Android app using the following command from a terminal window:

npx react-native run-android

After the rebuild, the app icon will display.

Conclusion

Once you get the hang of this process, it doesn't take much time. Those are all the necessary steps to add a splash screen and an app icon to a React Native app.

For more advanced usage of react-native-bootsplash please check its official documentation here on GitHub. There are some advanced strategies explained there, including animating the splash screen.

The complete source code for this example is at this GitHub repo

How To Protect Next.js Apps with Jscrambler

Jscrambler — Fri, 12 Nov 2021 16:52:55 +0000

Next.js is an open-source React-based framework built on top of Node.js that is aimed at developing web apps. It includes handy features such as hybrid static & server rendering, TypeScript support, smart bundling, and route pre-fetching.

In the 2020 State of JavaScript survey, Next.js was the second most used back-end framework (behind Express) but claimed the top spot when it came to satisfaction, with 92% of its users stating they are satisfied with the framework.

In this article, we’ll look at how you can integrate Jscrambler into your Next.js app development workflow. This will enable you to protect your JavaScript source code, through a combination of advanced obfuscation, code locks, anti-tampering, and anti-debugging.

Pre-Requisites

In order to properly integrate Jscrambler into your Next.js build process, there are two things we need to do first: creating a Next.js app and configuring Jscrambler. Let's go through those steps.

Creating Your Next.js Application

If you are not very experienced with Next.js yet, feel free to check their "Create a Next.js App” tutorial before moving forward. We will actually be using this example app in our integration tutorial, so let’s install it:

git clone https://github.com/JscramblerBlog/nextjs-jscrambler-integration-tutorial.git

Now, let's install all app dependencies using npm:

cd nextjs-jscrambler-integration-tutorial
npm i

The (simplified) base project structure of our Next.js application is as follows:

nextjs-jscrambler-integration-tutorial/
|-- package-lock.json
|-- package.json
|-- README.md
|-- .next
| |-- static/
| | |-- chunks/
| | | |-- pages/
|-- node_modules/
|-- pages/
|-- public/

package.json contains all the configurations which are related to npm such as dependencies, version, and scripts.
The pages directory features all the source code of the application. The sources are then built and packed into the .next/static/ directory. This is where our protected HTML and JavaScript files will be placed after the build.
The public directory contains all publicly accessible files, such as images.

We can easily run a development server just to make sure that the app is running properly.

npm run dev

You will get an URL in the console with the development server and, after opening it, you should see the app running as shown below.

And this is pretty much it in terms of our Next.js app. Let's move forward to protecting it with Jscrambler.

Configuring Jscrambler

If you haven't created a Jscrambler account yet, be sure to do so before moving forward.

All of Jscrambler's configuration will reside inside a single file: .jscramblerrc. As such, we will need to create this file to specify which transformations we wish to use.

The quickest way to achieve this is via the Jscrambler Web App. Once there, create a new app. Now, check the Templates and Fine-Tuning tabs to select the template or transformations you want to use to protect your code. In this tutorial, we'll be selecting the Obfuscation template. If you need help with these steps, please refer to our guide.

Now, we simply have to download a JSON file with all this configuration, which will be used only for quickly getting the required settings.

Now, let's create a new file named .jscramblerrc on the Next.js project’s root folder. Open the jscrambler.json file we just downloaded and copy all its contents to the .jscramblerrc file. After that, we just have to add two new sections to .jscramblerrc, which are filesSrc and filesDest (see below). Your final .jscramblerrc file should look like this:

{
 "keys": {
   "accessKey": <ACCESS_KEY_HERE>,
   "secretKey": <SECRET_KEY_HERE>
 },
 "applicationId": <APP_ID_HERE>,
 "filesSrc": [
   "./.next/**/*.html",
   "./.next/**/*.js"
 ],
 "filesDest": "./",
"params": [
    {
      "name": "objectPropertiesSparsing"
    },
    {
      "name": "variableMasking"
    },
    {
      "name": "whitespaceRemoval"
    },
    {
      "name": "identifiersRenaming",
      "options": {
        "mode": "SAFEST"
      }
    },
    {
      "name": "globalVariableIndirection"
    },
    {
      "name": "dotToBracketNotation"
    },
    {
      "name": "stringConcealing"
    },
    {
      "name": "functionReordering"
    },
    {
      "options": {
        "freq": 1,
        "features": [
          "opaqueFunctions"
        ]
      },
      "name": "functionOutlining"
    },
    {
      "name": "propertyKeysObfuscation",
      "options": {
        "encoding": [
          "hexadecimal"
        ]
      }
    },
    {
      "name": "regexObfuscation"
    },
    {
      "name": "booleanToAnything"
    }
  ],
  "areSubscribersOrdered": false,
  "useRecommendedOrder": true,
  "jscramblerVersion": "<7.X>",
  "tolerateMinification": true,
  "profilingDataMode": "off",
  "useAppClassification": true,
  "browsers": {}
}

Because we got this information directly via the Jscrambler Web App, our accessKey, secretKey and applicationId fields are already filled. If you wish to retrieve them manually, refer to our guide.

It's important to note that the params section specifies the transformations that will be used to protect your Next.js app. These can be hand-picked by you, by selecting them in the Web App or setting them manually. You can find documentation on all the available transformations here.

You can also change filesSrc to match the files you need/want to protect. For our example—and all Next.js apps—we recommend protecting the .html and .js files. Certainly, with a better understanding of the project, you may identify what’s critical and essential protecting.

By using filesDest: './', the files we send to protect will be overwritten by their protected version.

Integrating Jscrambler in the Build Process

Using the CLI is likely the most common way of generating your build. We will use our boilerplate app to showcase how to integrate Jscrambler into the build process.

The first step of our integration with Jscrambler is installing the Jscrambler API Client. Simply run:

npm i jscrambler --save-dev

To integrate Jscrambler in our application's build process via the CLI, we need to create a CLI hook in the scripts section of package.json. The section should look like this:

  "scripts": {
    "dev": "next dev",
    "build": "next build && jscrambler",
    "start": "next start"
  },

The specific "build": "next build && jscrambler" hook will trigger the jscrambler command after the build process is finished.

In order for this command to be executable, we need to make sure that the .jscramblerrc file that we created before is in our project's root folder.

We are now ready to protect our code and build our application via the CLI:

npm run build

This will create the protected production files on .next/static/.

And you're done! Now all your HTML and JavaScript files are protected with Jscrambler against code theft and reverse-engineering. Remember that you can always fine-tune your protections to manage eventual performance hits. If that's the case, be sure to follow our tutorials on Code Annotations and Profiling.

Testing the Protected Next.js App

As a final step, let's check if the app is running successfully with the newly protected source code:

npm run start

Open the URL provided in the console and it will open up a server with the production files.

Now, you can check what your protected code looks like. This can be achieved simply by opening the browser's debugger and opening the files from the "Sources" tab. The protected code should look like this:

Conclusion

Next.js has truly been a rising star in the web development ecosystem. The 4-year-old framework has been growing rapidly and bringing several welcome features for developers, making it much easier to release production-ready applications.

If you're building Next.js applications which have sensitive logic, want to prevent reverse-engineering, licensing violations, and tampering, a security solution such as Jscrambler is a must.

Integrating Jscrambler into Next.js's build process is simple and enables protecting your code with the most sophisticated polymorphic obfuscation, code locks, and self-defensive capabilities.

This all comes with premium support, so be sure to contact us if you have any questions!

Building an app with Angular & Firebase

Jay — Tue, 02 Nov 2021 18:07:39 +0000

Firebase is a service provided by Google where the back end is provided as a service for use in applications. Its database (Firebase Realtime Database) is a NoSQL database where data is stored in JSON like documents. In this tutorial, you'll learn how to build an Angular application using Firebase as backend. So, let's get started.

Setting up Firebase

Let's start by setting up Firebase by signing into the Firebase console.

Click on the Add project to create a new project.

You'll be prompted to enter a name for your project. We'll be naming our project js-scrambler-demo. Next, it'll ask you whether to enable Google Analytics for this project or not. We’ll disable it since it's not required for this tutorial and click on Create project.

Click on the continue button and you will be able to view the following screen.

Now since we are creating a web app, we’ll click on the web icon. It'll ask you to register an app. Enter an app name and click on register.

Once you click register app you will be able to see the Firebase app configurations.

We'll be using the above configurations in our Angular app to connect to the Firebase database.

Click on the Firestore Database link from the left side menu from the application home.

Click on the Create database button to create a new database in firestore. Once inside the Cloud firestore data tab, click on the Start collection button to create a new collection.

Enter the name of the collection as shown in the above screenshot. Click next to add a new document to the collection.

We are planning to have two fields to save the name and personal information of the user, hence the fields name and personalInfo.

Next, let's try to connect Firebase to the Angular app.

Connecting Angular to Firebase

Let's start by creating an Angular app using Angular CLI.

ng new angular-firebase

Install @angular/fire and firebase to the Angular project.

npm install firebase @angular/fire

Go to your Angular app, then on the app.module.ts file import the AngularFireModule and the AngularFirestoreModule.

import { AngularFireModule } from  '@angular/fire';
import { AngularFirestoreModule } from  '@angular/fire/firestore';

Using the AngularFireModule initializes the app using the configuration keys from the Firebase console. Here is how the app.module.ts file looks:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    AngularFireModule.initializeApp({
      apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
      authDomain: "js-scrambler-demo-app.firebaseapp.com",
      projectId: "js-scrambler-demo-app",
      storageBucket: "js-scrambler-demo-app.appspot.com",
      messagingSenderId: "xxxxxxxxxx",
      appId: "xxxxxxxxxxxxxxxxxxxxxxxxxxx"
    }),
    AngularFirestoreModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

From the app.component.ts file, import AngularFirestore and create an instance of it in the constructor method.

import { AngularFirestore } from  '@angular/fire/firestore';

constructor(private  store: AngularFirestore){}

Define a method called getAll to get all the collected data from Firebase.

  ngOnInit(){
    this.getAll();
  }

  getAll(){
    this.store.collection('userInfo').snapshotChanges().subscribe((response) => {
      console.log('reponse ', response);
    })
  }

As seen in the above method, we are subscribing to the collection's snapshot changes which gives us the full collection information. You can use the response to parse the collection information.

Save the above changes and run the application and you'll be able to get the collection userInfo details in the browser console. So, that means we are able to connect to the database. Now let's see how to implement basic CRUD operations on Firebase from Angular.

Adding Bootstrap to Angular

Install Bootstrap and the required dependencies to the Angular project.

npm install bootstrap jquery popper.js

Add the following to the script references to the angular.json file under architect -> build key.

"styles": [
    "src/styles.css",
    "node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
    "node_modules/jquery/dist/jquery.min.js",
    "node_modules/popper.js/dist/umd/popper.min.js",
    "node_modules/bootstrap/dist/js/bootstrap.min.js"
]

Fetching the Data

So, we already fetched the data from the collection using the getAll method. But you need to parse the data and render it to the user interface.

Inside the app.component.ts file, define a variable called dataSource which we'll use to render the collection info in tabular form.

dataSource : any;

From the response received from the collection snapshotChanges you need to iterate over each data and collect the required info. You'll be requiring the unique document ID, name, and personal Info from each document. Each document's payload.doc has the required information which we can parse as shown,

  getAll(){
  this.store.collection('userInfo').snapshotChanges().subscribe((response) => {
      this.dataSource = response.map(item => 
        Object.assign({id : item.payload.doc.id}, item.payload.doc.data())
      );
    })
  }

Now once you have the data, let's render the data to the UI. For the rendering of the data add the following HTML to app.component.html.

<div class="container m-100 main">
  <div>
    <svg data-bs-toggle="modal" (click)="openDialog()" xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-cloud-plus-fill" style="cursor: pointer;" viewBox="0 0 16 16">
      <path d="M8 2a5.53 5.53 0 0 0-3.594 1.342c-.766.66-1.321 1.52-1.464 2.383C1.266 6.095 0 7.555 0 9.318 0 11.366 1.708 13 3.781 13h8.906C14.502 13 16 11.57 16 9.773c0-1.636-1.242-2.969-2.834-3.194C12.923 3.999 10.69 2 8 2zm.5 4v1.5H10a.5.5 0 0 1 0 1H8.5V10a.5.5 0 0 1-1 0V8.5H6a.5.5 0 0 1 0-1h1.5V6a.5.5 0 0 1 1 0z"/>
    </svg>
  </div>
  <table class="table">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">Name</th>
        <th scope="col">Personal Info</th>
        <th>

        </th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let item of dataSource; let i = index;">
        <th scope="row">{{i+1}}</th>
        <td>{{item.name}}</td>
        <td>{{item.personalInfo}}</td>
        <td class="action">
          <svg (click)="edit(item.id)" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil-fill" viewBox="0 0 16 16">
            <path d="M12.854.146a.5.5 0 0 0-.707 0L10.5 1.793 14.207 5.5l1.647-1.646a.5.5 0 0 0 0-.708l-3-3zm.646 6.061L9.793 2.5 3.293 9H3.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.207l6.5-6.5zm-7.468 7.468A.5.5 0 0 1 6 13.5V13h-.5a.5.5 0 0 1-.5-.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.5-.5V10h-.5a.499.499 0 0 1-.175-.032l-.179.178a.5.5 0 0 0-.11.168l-2 5a.5.5 0 0 0 .65.65l5-2a.5.5 0 0 0 .168-.11l.178-.178z"/>
          </svg>
          <svg (click)="delete(item.id)" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash-fill" viewBox="0 0 16 16">
            <path d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1H2.5zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zM8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5zm3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0z"/>
          </svg>
        </td>
      </tr>
    </tbody>
  </table>
</div>

As seen in the above code, we are iterating over the dataSource to render it in tabular form. Add the following CSS to the app.component.css file.

.m-100{
    margin: 100px;
}

.main{
    padding: 1.5rem;
    border: 1px solid #dee2e6;
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
}

.action svg{
    margin: 0px 5px 0px 5px;
}

Save the changes and run the Angular application. You can add some data to the collection from the Firebase console and you should be able to see it in the Angular application.

Adding New Data

In the app.component.html code append the following HTML code to show an add/edit modal popup.

<button #btnShow style="display: none;" id="btnShow" type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" ></button>

<div id="exampleModal" #myModal class="modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Add New User</h5>
        <button #btnClose id="btnClose" type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="mb-3">
          <label for="exampleFormControlInput1" class="form-label">Name</label>
          <input type="text" [(ngModel)]="name" class="form-control" id="exampleFormControlInput1" placeholder="enter name">
        </div>
        <div class="mb-3">
          <label for="exampleFormControlTextarea1" class="form-label">Personal Info</label>
          <textarea class="form-control" [(ngModel)]="personalInfo" placeholder="enter some personal info" id="exampleFormControlTextarea1" rows="3"></textarea>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button"  class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" (click)="add()" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Define name and personalInfo in app.component.ts. Create a method called add which will add a new document to the userInfo collection based on the data entered in the popup.

add(){
      this.store.collection('userInfo').add({name : this.name, personalInfo : this.personalInfo});
  }

Inside the app.component.ts add a reference to the buttons to open and close the popup using ViewChild. Also define two methods for opening and closing the modal popup using the button references.

@ViewChild('btnShow')
btnShow!: ElementRef;

@ViewChild('btnClose')
btnClose!: ElementRef;

openDialog(){
  this.btnShow.nativeElement.click();
}

closeDialog(){
  this.btnClose.nativeElement.click();
}

In the app.component.html file you have already added a click reference to the add method. Now go ahead and also add the closeDialog method call inside the add method to close popup after adding the document.

add(){
      this.store.collection('userInfo').add({name : this.name, personalInfo : this.personalInfo});
      this.closeDialog();
  }

Save the changes and click on the add icon to add a new record. You will be able to add a new record from the Add New User pop-up screen.

Updating Existing Record

For updating an existing record you need to have the unique document ID. So when the user clicks on the edit icon, let's keep the id and other details in a variable.

editObj : any;

Now let's define a method called edit and pass document ID to it. Using the ID let's fetch the document information and populate the popup.

  edit(id : string){
    this.store.collection('userInfo').doc(id).get().subscribe((response) => {
      this.editObj = Object.assign({id : response.id}, response.data());
      this.name = this.editObj.name;
      this.personalInfo = this.editObj.personalInfo;
      this.openDialog();
    })
  }

Save the changes and click on the edit icon of any existing record and the details will get populated.

Next, let's modify our add method to update in case of an existing record.

  add(){
    if(this.editObj){
      this.store.collection('userInfo').doc(this.editObj.id).update({name : this.name, personalInfo : this.personalInfo});
    } else {
      this.store.collection('userInfo').add({name : this.name, personalInfo : this.personalInfo});
    }
    this.closeDialog();
  }

As seen in the above code, if an editObj exists we update the particular document records, and if not we add a new one.

Save the changes and click on the edit icon to edit an icon. Make some changes and click save. You will be able to update the existing information to Firebase.

Add a clearEdit method to clear the editObj and reset variables. You can call it on the close button click.

clearEdit(){
  this.editObj = null;
  this.name = "";
  this.personalInfo = "";
}

Add the clearEdit method on the close button in app.component.html

<button  type="button"  (click)="clearEdit()"  class="btn btn-secondary"  data-bs-dismiss="modal">Close</button>

Deleting Record

For deleting a document from Firebase you need to call the delete method on a document fetched with a document ID. Here is how the delete method looks:

delete(id : string){
  this.store.collection('list').doc(id).delete();
}

The method call is already added in the app.component.htmlfile. Save the changes and click on the delete icon corresponding to a record and you will be able to delete an existing record.

Wrapping it Up

In this tutorial, you learned how to build a basic CRUD app using Angular and Firebase. For detailed information related to Firebase and its APIs, you can refer to the official documentation.
The source code from this tutorial is available on GitHub.

Lastly, if you want to learn how you can secure your Angular source code against theft and reverse-engineering, be sure to check our guide.