DEV Community: Willy-Sambora

Hashing

Willy-Sambora — Sun, 16 Jun 2024 22:03:10 +0000

Hashing transforms input data into a fixed-size string using a hash function, essential for fast data retrieval, efficient storage, and ensuring data integrity in applications like hash tables, databases, and cryptography.

Using Python to build a chatbot

Willy-Sambora — Thu, 26 Jan 2023 13:32:52 +0000

Introduction
Building a chatbot using Python is a great way to learn about natural language processing, machine learning, and web development. There are many libraries and frameworks available for building chatbots in Python, such as NLTK, ChatterBot, and Rasa.

Here is an example of how you can build a chatbot using the ChatterBot library:

Install ChatterBot using pip: pip install chatterbot
Import the necessary modules and initialize the chatb
ot:

from chatterbot import ChatBot
from chatterbot.trainers import ChatterBotCorpusTrainer

chatbot = ChatBot('MyChatBot')

Train the chatbot using a corpus of data, such as the one provided by ChatterBot:

trainer = ChatterBotCorpusTrainer(chatbot)
trainer.train("chatterbot.corpus.english.greetings",
              "chatterbot.corpus.english.conversations")

Define a function to handle input from the user and generate a response from the chatbot:

def get_response(user_input):
    return chatbot.get_response(user_input)

Use the function in a loop to interact with the chatbot:

while True:
    user_input = input("You: ")
    print("Chatbot: ", get_response(user_input))

test your chatbot with different inputs, if the result is not satisfying you can train it more or fine-tune it

Note that this is a very basic example, and there are many ways to improve and customize the chatbot, such as using machine learning to train it on a larger dataset, or using web frameworks like Flask or Django to build a web-based interface for the chatbot.

Here are some additional steps you can take to improve your chatbot:

Use a more sophisticated model for generating responses, such as a neural network or deep learning model.

Incorporate sentiment analysis and entity recognition to understand the user's intent and respond appropriately.
Integrate the chatbot with external APIs or services, such as weather forecasts or news updates, to provide more accurate and relevant responses.
Use machine learning to improve the chatbot's understanding of user inputs over time.
Add a GUI for a better user experience
Incorporate NLP techniques to improve the chatbot's understanding of natural language inputs.

It's important to note that building a chatbot is an iterative process and it might take some time and experimentation to get the desired result.

In addition to the above example, you can use other libraries or frameworks like Rasa, NLTK, and Tensorflow to build a chatbot. Each of these libraries has its own set of pros and cons. Rasa, for example, allows you to train your own models using Rasa NLU and Rasa Core, while Tensorflow provides more flexibility in terms of the types of models you can use to train your chatbot.

Conclusion
In conclusion, building a chatbot using Python is a great way to learn about natural language processing, machine learning, and web development. There are many libraries and frameworks available for building chatbots in Python, such as NLTK, ChatterBot, and Rasa. Building a chatbot is an iterative process that requires some experimentation to get the desired result. To get a better chatbot, you can use machine learning to train the chatbot on a larger dataset, or use web frameworks like Flask or Django to build a web-based interface for the chatbot. Additionally, you can also incorporate sentiment analysis, entity recognition, and external APIs to provide more accurate and relevant responses. It's important to note that building a chatbot is an iterative process and it might take some time and experimentation to get the desired result.

Using Python to build a Web Scraper

Willy-Sambora — Thu, 26 Jan 2023 12:17:43 +0000

Introduction
Building a web scraper using Python is a great way to extract useful information from websites and save it for analysis or use in other projects.
Step 1: Install the Required Libraries
The first step is to install the required libraries. For this tutorial, we will be using the following libraries:

requests: to make HTTP requests to the website
BeautifulSoup: to parse the HTML and extract the data
pandas: to store and manipulate the data

You can install these libraries using pip by running the following command in your terminal:

pip install requests beautifulsoup4 pandas

Step 2: Make an HTTP Request to the Website
The next step is to make an HTTP request to the website you want to scrape. You can do this using the requests library. Here is an example of how to make a GET request to a website:

import requests

url = 'https://www.example.com'
response = requests.get(url)

Step 3: Parse the HTML
Once you have the HTML from the website, you can use BeautifulSoup to parse it and extract the data you need. Here is an example of how to parse the HTML and extract the data using BeautifulSoup:

from bs4 import BeautifulSoup

soup = BeautifulSoup(response.text, 'html.parser')

Step 4: Extract the Data
Now that you have the HTML parsed, you can use the various methods provided by BeautifulSoup to extract the data you need. For example, you can use the find() or find_all() methods to locate specific tags, and the attrs property to access the attributes of a tag. Here is an example of how to extract the data using BeautifulSoup:

titles = soup.find_all('h2', class_='title')
for title in titles:
    print(title.text)

Step 5: Store the Data
Once you have extracted the data, you can store it in a Pandas dataframe for further analysis and manipulation. Here is an example of how to create a dataframe and store the data:

import pandas as pd

data = []
for title in titles:
    data.append({'title': title.text})

df = pd.DataFrame(data)

Step 6: Save the Data
Finally, you can save the data to a CSV file or a JSON file for later use. Here is an example of how to save the data to a CSV file:

df.to_csv('data.csv', index=False)

This is a simple example of how to build a web scraper using Python. In practice, web scraping can be more complex and require more advanced techniques such as handling pagination, handling AJAX requests, and handling CAPTCHAs.

Please make sure that you have the right to scrape the website, and that you are following the website's terms of use and privacy policy. Some website might have some restrictions on scraping their content, you should always
Conclusion
Building a web scraper with Python is a powerful way to extract and analyze data from websites. By using libraries such as requests, BeautifulSoup, and pandas, you can easily make HTTP requests, parse HTML, extract data, and store it for further analysis.

However, it's important to note that web scraping can be complex and requires a good understanding of HTML, CSS, and JavaScript. It's also important to be aware of the legal and ethical considerations, such as following the website's terms of use and privacy policy.

In the end, web scraping is a powerful tool for data collection, but it should be used responsibly, it can help you to gain insights and make data-driven decisions, but it should be done with caution and respect.

Why Use React Native for Your Mobile App?

Willy-Sambora — Sun, 28 Aug 2022 18:11:04 +0000

What is React Native?
React Native is a framework that allows you to build native mobile apps using JavaScript. Normally, you’d need to program your mobile app using Java (for Android) and Swift/Obj-C (for iOS). React Native removes that requirement, leading to fully functional apps on both platforms in much less time and using just one coding language.

Facebook is the company behind both ReactJS and React Native. In fact, Facebook first created React to build the social platform we all love to hate. After further development, Facebook released ReactJS for the web as open source.

But Facebook was still struggling with their mobile app. They needed to maintain two codebases: one for iOS, one for Android. Features implemented in Swift on iOS had to be implemented separately in Java on Android, leading to work duplication and asymmetrical apps.

React Native neatly solves that problem.

Coming on the heels of ReactJS, the purpose of React Native was to facilitate the creation of mobile apps. It’s simple: if you can code an app once in JavaScript and deploy it both to Android and iOS, your life gets a lot easier.

If you’ve ever used the official Facebook app on Android or iOS, you’ve seen React Native in action. (Same goes for the mobile Airbnb app.)

How popular is React Native in terms of market share?
React Native is rising in popularity as a convenient solution to build cross-platform mobile apps with less strain on your budget.

The stats are especially telling when you consider the top apps in the App Store and Google Play Store right now. Among the top 500 apps in the US, 14.85% of installed apps are built with React Native.

In fact, in the category of top US apps, React Native is the third most popular framework, right after Kotlin and Android Architecture Components.

Why use React Native?
For a long time, React Native was considered to be commercially unviable. It wasn’t developed or supported enough to produce “native-like” apps.

But the times have changed. React Native is gaining popularity, gaining community support, and gaining more market share. It’s getting easier and easier to write brilliant apps using React Native—and the world is taking notice.

Tried and trusted
Facebook built React Native first and foremost to create a fantastic mobile app for their own social portal. More likely than not, you’ve used it on your phone by way of the Facebook mobile app. Does it feel like a native app? Sure it does.

But since React Native has gone open-source, more companies have decided to bet on it and create their mobile apps this way. Here are just a few examples.

Popular React Native apps

Facebook
Instagram
Skype
Tesla
Walmart
Discord
Bloomberg Putting your app in such company isn’t the worst idea in the world. One codebase for two platforms With React Native, you create one codebase that works on both Android and iOS. And it doesn’t just “work”—it compiles to native Java and Swift code. Specifically, React Native creates a bridge between web UI components and their native Java/Swift counterparts.

Think about the implications for your software project. No need for two development teams for two platforms. No need to synchronize features and layouts. You simply develop faster and can get more out of your budget.

Use the language you already know
You need less specialized knowledge to create React Native apps. Chances are you already have someone on your team that can program in JavaScript, possibly even in ReactJS specifically. JS developers are simply easier to find compared to developers with skills in Java or Swift.

Even if your frontend developer has never used React Native, with some self-education they can get up to speed very quickly, especially if they’ve used React already. All you need is a little time googling to find out which web components correspond with which mobile components—and you’re set.

Growing all the time
React Native is under active development. Both Facebook and the massive community around React Native are constantly working on improvements for the framework. If you can’t solve a problem right now because React Native doesn’t have the solution, in a few months the situation might be different.

For example, Bartosz was recently faced with the task of implementing a “speedometer” component for one of his projects. His initial idea was to create such a component by himself. But first, he decided to check if someone from the community had the same need in the past. Lo and behold, he found an open license speedometer ready to use, saving him time.

Even Microsoft took notice of React Native, prompting them to create their own fork: React Native for Windows. Their solution allows developers to more easily create apps for Windows 10, Windows 10 Mobile, and Xbox One.

Save even more time with a web app
If you have a ReactJS web app, fragments of the frontend code (such as business logic) can be shared between mobile and web, facilitating development even more.

What’s an example of a React Native app?
Bloomberg, the business and financial news provider, decided to use React Native to create its new consumer app after initial testing and prototyping.

Previously, Bloomberg engineers had to develop iOS and Android versions separately, without being able to share the code they created. Switching to React Native saved them time as they could unify their development capabilities and each developer could focus on one feature at a time. As a result, the team managed to create the new app in five months—about half the usual development time.

Using React Native also allowed the company to add a number of new, interactive features to the app, such as the ability to swipe a headline to share or bookmark an article. Users can also access live TV and on-demand event feeds.

The app allows users to customize it extensively, including personalizing content according to their interests and location, and monitoring their own personal portfolios.

The React Native design automates code refreshes and, instead of recompiling, it reloads the app instantly.

According to a senior software engineer at Bloomberg who worked on the transition, “React Native is the best out there,” and the company would be using it again in other mobile apps.

What should you watch out for when using React Native?
As with any solution, React Native has its drawbacks. What should you be wary of?

React Native is not 100% native...
Despite what Facebook might try to tell you, React Native apps are not equivalent to true native apps written entirely in Swift/Obj-C or Java.

Let’s take the native Gmail as an example. The Gmail app includes a worker that checks your inbox. Your Gmail account is synced with the whole mobile system, not just the app. Gmail also knows that if you’re on mobile data, not WiFi, it should sync less often.

With React Native you’re not integrated so closely with the system—at least not out of the box. Your account will be stored in the app, not the system. It’s also harder to take into account WiFi versus mobile data. For some apps, this will not be a problem; for others, it might be game-changing.

...but you can make it as native as you need
When you choose to use React Native, you don’t have to use it exclusively. You can still use React for most of the app, and native for the crucial pieces that need to integrate 100% with the native system.

One of our prospective clients recently argued against React Native, saying it’s still not the same as a true native app. Our counterargument was simple: it doesn’t have to be the same. With a little additional work, you can make it “as native as you need” by adding some Java/Swift code for specific cases and features.

If you use React Native, you have to use React
This might be obvious, but it still needs to be said as a disclaimer. When you opt for React Native, you will have to use ReactJS to create your app. React has competitors for a reason; it’s not always the best choice.

Fortunately, there are some competing solutions that fulfill a similar purpose to React Native without locking you down. One such competitor is Ionic. Their community isn’t as active, nor is it growing so quickly. But Ionic has one advantage: you can use different JS frameworks with it, including Angular, Vue.js and even React if you need some parts of it.

Badly written JavaScript or heavy calculations could hurt your performance

Using JavaScript in itself is a solution that has its drawbacks. For example, if the JavaScript code in your React Native app is poorly written, you will feel the difference more strongly than if your app was a pure native one.

However, this is a slight drawback that you won't feel if you have skilled React Native developers on your side.
JavaScript may also slow down performance if your app is very calculation-heavy. This is not a very common case for most mobile apps, but still a scenario you should consider.

Is React Native good for your project?
You’ve now discovered some of the benefits of React Native, but you’re still not sure if you should use it in your project? Here’s what it can help you achieve:

Save time and money
If you need to develop an app for both iOS and Android, React Native is the best tool out there. It can reduce the codebase by about 95%, saving you time and money. On top of that, React Native has a number of open-source libraries of pre-built components which can help you further speed up the development process.

Create great mobile apps
React Native is great for mobile apps. It provides a slick, smooth and responsive user interface, while significantly reducing load time. It’s also much faster and cheaper to build apps in React Native as opposed to building native ones, without the need to compromise on quality and functionality.

Use existing skills
Since React Native is based on JavaScript, your developers will not need long to get to grips with it. Having said this, it’s an open-source and community-driven framework, so if they ever need support, it’s widely available online.

Add third-party plugins
React Native also allows you to easily incorporate third-party plug-ins and APIs, including maps and payment systems.

Final thoughts
So what should you know about React Native? Here are the key takeaways:

If you’re using the Facebook or Airbnb mobile app, you’re using React Native without even knowing it.
React Native apps are easy to write, saving time for developers and cutting costs for project managers.
React Native apps lower your development and maintenance costs, because you don’t have to deal with two separate codebases for iOS and Android.
Since React Native is just a wrapper for native components, there’s nothing stopping you from adding native Java or Swift code where you need it.
At the end of the day, you’re still coding in JavaScript. There’s no need to learn Swift/Java, or to add developers with such skills to your roster.
React Native is growing fast with no signs of stopping.
These are just some of the many benefits React Native can deliver.

Golang: Implementing push notifications using FCM

Willy-Sambora — Sun, 28 Aug 2022 17:30:05 +0000

1. Basic Introduction to firebase and a device token
The device token is the main contestant, responsible for pushing notifications. It’s not a fancy word, it’s simply an id that is unique for each device. When we install any application, our device’s unique token is being stored on their server, using which they can notify us.

Firebase is the tool, used for pushing notifications to apps/mobiles/tablets.
It provides a setting to configure the cloud messaging (FCM) service, which is used for push notifications.

Note: The firebase config files used at the app side (google_services.json file for android and GoogleService-Info.plist for iOS) and service_account key must be created for the same project from the firebase console.

In this blog, we will explore how push notifications are sent using Golang and Firebase.

Let’s jump to implementation.

2. Configure Firebase auth key
Required packages:
firebase.google.com/go
firebase.google.com/go/messaging
It’s always better to use sensitive stuff in an encrypted format. To serve that purpose I’ve stored the service account key in format base64 encoded as an environment variable.

Here, FIREBASE_AUTH_KEY contains a base64 encoded service account key.

First, let’s decode the service account key.

func getDecodedFireBaseKey() ([]byte, error) {

  fireBaseAuthKey := os.Getenv("FIREBASE_AUTH_KEY")

  decodedKey, err :=  base64.StdEncoding.DecodeString(fireBaseAuthKey)
  if err != nil {
     return nil, err
  }

  return decodedKey, nil
}

The above method will return decoded service account key that will be used in the next step.

Retrieve decoded key and Initialize firebase app, using below code.

decodedKey, err := getDecodedFireBaseKey()
if err != nil {
   return err
}

opts :=  []option.ClientOption{option.WithCredentialsJSON(decodedKey)}

// Initialize firebase app
app, err := firebase.NewApp(context.Background(), nil, opts...)

if err != nil {
   log.Debug("Error in initializing firebase app: %s", err)
   return err
}

3. Initialize firebase client
Create fcmClient for messaging(pushing notifications).

fcmClient, err := app.Messaging(context.Background())

if err != nil {
   return err
}

Finally, let’s write a code to send a notification.

4. Send Push notifications to a single device

response, err := fcmClient.Send(context.Background(), &messaging.Message{

  Notification: &messaging.Notification{
    Title: "Congratulations!!",
    Body: "You have just implement push notification",
  },
    Token: "sample-device-token", // it's a single device token
})

if err != nil {
     return err
}

The above code will send a push notification to a single device.

5. Send Push notifications to multiple devices
Consider a scenario if you want to notify multiple devices. It will be almost the same as we send a push notification to a single device, just need to replace fcmClient’s Send() method with SendMulticast().

response, err := fcmClient.SendMulticast(context.Background(), &messaging.MulticastMessage{
   Notification: &messaging.Notification{
     Title: "Congratulations!!",
     Body:  "You have just implement push notification",
   },
   Tokens: deviceTokens, // it's an array of device tokens
  })

  if err != nil {
     return err
  }

log.Debug("Response success count : ", response.SuccessCount)
log.Debug("Response failure count : ", response.FailureCount)

Yay !! You have implemented push notifications in your Golang project 🎊.
The response variable will contain the success count and failure count of sent notifications.

Find the full code at FCM with Golang. Invoke SendPushNotification() and boom !! Check a notification received in the application.

Meanwhile, you can also check to debug logs, as it has SuccessCount and failureCount. It will help to verify that notifications are pushed to how many tokens. In case of finding failureCount > 0, you must verify whether you’re giving a valid device token or not.

Implementing React Native push notifications with Firebase Cloud Messaging

Willy-Sambora — Sun, 28 Aug 2022 17:10:49 +0000

React Native uses JavaScript and React to build apps for iOS, Android, and the web from a single codebase. It also allows you to tap into the native features of each device, such as the device’s default themes, camera, geolocation, and push notifications. This means you can use React Native to build a complete mobile app that integrates with iOS or Android’s underlying settings, which makes it simple to implement push notifications, as I will demonstrate today.

In this article, we will learn how to build a simple React chat application that integrates with Firebase Cloud Messaging and the device’s push notifications to notify a user when they receive a new message.

Prerequisites
To follow along with this tutorial, it is essential to have the following:

Node v14 or above and npm v5.6 or above installed in your local machine
Working knowledge of React Native
A Firebase account

Setting up a React Native chat app
To set up the application, go ahead and create a project folder where you want your project to live, then initialize the application using this npx command:

npx react-native init chat_app_with_fcm

Once the above command is executed, a chat_app_with_fcm directory that hosts your React Native settings will be created. Change the directory path to the newly created chat_app_with_fcm folder:

cd chat_app_with_fcm

Let’s test if the bootstrapped React Native template is working. Make sure you have a connected device or an emulator, and then start the application as such:

npm run android

This will start a development environment that you can use to access the application on the connected device or emulator.

Building chat functionality
This guide is creating a chat application. To handle the chat functionality, we will use the react-native-gifted-chat package. The package will provide a ready-to-use, interactive UI for the chat application.

To install the package, open your project terminal and run the following command:

npm i react-native-gifted-chat

Once installed, navigate to the App.js file and make the following changes.

First, import the GiftedChat module:

import { GiftedChat } from 'react-native-gifted-chat'

Then, import the following Hooks:

import { useState, useCallback, useEffect } from "react";

Inside the App: () function, define a state for messages:

const [messages, setMessages] = useState([]);

Define a useEffect to set a default message when the application loads:

useEffect(() => {
    setMessages([
        {
            _id: 1,
            text: 'Hello there',
            createdAt: new Date(),
            user: {
                _id: 2,
                name: 'PartyA',
                avatar: 'https://placeimg.com/140/140/any',
            },
        },
    ]);
}, [])

Finally, replace the rendered view with the GiftedChat component:

return (
    <GiftedChat
        backgroundColor={isDarkMode ? Colors.black : Colors.white}
        messages={messages}
        onSend={messages => onSend(messages)}
        user={{
            _id: 1,
        }}
    />
)

After making the above changes, React Native will use its hot reload features and reflect the changes to your screen.

Setting up an application on the Firebase console
Let’s now connect this application to Firebase. To set this up, log on to your Firebase account and create a new project using the Add project card. Enter your project name, and then click Continue. Feel free to enable or disable Google Analytics on the next step, and then click Continue.

When your project is ready, click Continue again to go to the project dashboard. On this dashboard, create an Android application using the Android icon present on your project dashboard.

Under Android package name, enter the package name from your app. You can get this package name inside the /android/app/src/main/AndroidManifest.xml file. Finally, hit Register app, download the google-services.json file, and place it under your project’s android/app/ directory.

Setting up Firebase Cloud Messaging in a React Native app
To connect our React Native application with Firebase, we have to configure the application with the Firebase credentials.

Under android/build.gradle, add the following classpath inside the buildscripts/dependencies tags:

classpath 'com.google.gms:google-services:4.3.10'

Under the /android/app/build.gradle file, add the google-services plugin right below apply plugin: "com.android.application" :

apply plugin: 'com.google.gms.google-services'

Next, install React Native Firebase like so:

npm i --save @react-native-firebase/messaging

These settings are ready. Now, let’s handle how React Native will use FCM to send the chat messages.

Handling foreground message notifications
First, create an event handler to handle foreground message notifications. The handler will receive the incoming message, structure it, add it to the message state, and display an alert.

Navigate to the App.js file and import React Native Firebase:

import messaging from '@react-native-firebase/messaging';

Under App(), add a useEffect() Hook, which will listen to any change in the messages state:

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

Inside the useEffect(), add an event handler to listen to notifications:

// Get the notification message
const subscribe = messaging().onMessage(async remoteMessage => {

    // Get the message body
    let message_body = remoteMessage.notification.body;

    // Get the message title
    let message_title = remoteMessage.notification.title;

    // Get message image
    let avatar = remoteMessage.notification.android.imageUrl;

    // Append the message to the current messages state
    setMessages(messages => GiftedChat.append(messages, {
        _id: Math.round(Math.random() * 1000000),
        text: message_body,
        createdAt: new Date(),
        user: {
            _id: 2,
            name: "PartyB",
            avatar: avatar,
        },
    }));

    // Show an alert to the user
    Alert.alert(message_title, message_body);
});

return subscribe;

To test this, go to the Firebase console of the application you created in the previous step. On the left sidebar, under Engage, click Cloud messaging. Then click the button Send your first message.

On the form that proceeds:

Enter any title (e.g., “test”) Under Notification text
Type in “Hello there!” under Notification image
Paste in any image address you’d like, or use this one of a glass of water
Click the Next button below
Now, under Target, click Select an app and then select your app. Click Next on the next step and then Review. On the resulting popup, click Publish.

Handling background message notifications
Background message notifications work when the application is closed. Similarly to foreground notifications, we will be adding a handler.

To add the handler, make the following changes on App.js before App():

// Register background handler
// Get the notification
messaging().setBackgroundMessageHandler(async remoteMessage => {
    // Extract the body
    let message_body = remoteMessage.notification.body;
    // Extract the title
    let message_title = remoteMessage.notification.title;
    // Extract the notification image 
    let avatar = remoteMessage.notification.android.imageUrl;

    // Add the notification to the messages array
    setMessages(messages => GiftedChat.append(messages, {
        _id: Math.round(Math.random() * 1000000),
        text: message_body,
        createdAt: new Date(),
        user: {
            _id: 2,
            name: "PartyB",
            avatar: avatar,
        },
    }));

    // Send a notification alert
    Alert.alert(message_title, message_body);
});

To test the functionality, you will have to close the application, then send a notification message from the console as in the previous section.

You should receive such an alert like the one below on your phone’s push notification bar.

Conclusion
Notifications are critical to modern mobile applications. I hope this guide has helped you learn the important skill of adding push notifications to React Native apps. As we have seen, Firebase Cloud Messaging and React Native Firebase makes this flow seamless and very easy.