DEV Community: Okafor Peace Ngozi

How to set up Keycloak and Postgres using Neon

Okafor Peace Ngozi — Tue, 27 Feb 2024 11:25:00 +0000

Keycloak is a tool that helps manage user data by providing authentication and authorization services. It is highly secure, scalable, and flexible. Integrating Keycloak with PostgreSQL ensures a stable, secure, and scalable foundation for your identity and access management system. However, setting up the database integration can be challenging due to the complexities of configuring drivers, database schema, and security settings.

Neon is an open-source, fully managed, serverless Postgres. Neon separates storage and compute, provides real-time scaling, and allows for easy branching of databases. Its scale-to-zero feature ensures efficient resource allocation and offers a generous free tier that makes it cost-effective. Neon also substitutes the PostgreSQL storage layer by redistributing data across a cluster of nodes, which sets it apart from conventional setups.

This tutorial will guide you through setting up Keycloak with Neon Postgres, including best practices and troubleshooting guidelines for a secure and high-performing application.

Prerequisites

To properly understand how to set up Keycloak and Postgres, you need to meet the following requirements:

Installation of the latest version of Java.
Docker container installed.
PostgreSQL installed on the machine. Read this guide on how to do so.

Setting up Keycloak with Postgres using Neon

This section is split into three distinct sections:

Setting up Neon
Installing Postgres
Setting up Keycloak with Neon

Setting up Neon

Step 1: Sign up for Neon:
Visit Neon to create an account

Step 2: Create a database:
Follow Neon's instructions to create a new PostgreSQL database and select the Postgres version.

Step 3: Configure database:
Note the database URL, username, and password you'll need to connect to your application later.

Step 4: Create tables via SQL queries:
Type in the following command in your Neon SQL editor to create a signup table:



create table signup(
    id serial primary key, 
    fullname text not null,
    username text not null
);

Then, add some data to the table:



insert into signup (fullname, username) values
  ('Peace Okafor', 'Ladyprowess'), ('Esther Okafor', 'ada');

On the Neon dashboard, go to tables and click the database you just created to see the data.

Installing Postgres locally

Step 1: Install PostgreSQL (if not already installed):
Download it from the official PostgreSQL website. Type psql --version in the terminal. This command returns the version of psql if it's installed correctly.

Step 2: Access Neon Postgres:
Use the provided connection string to connect to your Neon Postgres database. You can do this via a PostgreSQL client or through a terminal:



psql "postgresql://Ladyprowess:*********@ep-green-recipe-74532497.us-east-2.aws.neon.tech/login?sslmode=require"

Note: In the Windows command prompt, you should use double quotes for the connection string instead of single quotes.

Nice! You've successfully set up your Neon Postgres database using psql locally.

Here are a few basic commands to get started to verify your connection:

\l or \list to list all database

SELECT * FROM users; to select everything from a table named users. You can change the table user to the one you set from your SQL Queries.

Setting up Keycloak

Step 1: Download Keycloak (if not already installed):
Visit the Keycloak website and download the latest version of Keycloak. It's usually provided as a .zip or .tar.gz file.

Step 2: Extract the files
Extract the downloaded archive to a directory of your choice.

Configuring Keycloak to use Neon Postgres

Step 1: Configure Neon Postgres in Keycloak:
Locate the keycloak.conf file in the keycloak folder and edit the following settings with the Neon Postgres connection provided. This is what it’ll look like:



# Basic settings for running in production. Change accordingly before deploying the server.
# Database
# The database vendor.
db=postgres
# The username of the database user.
db-username=Ladyprowess
# The password of the database user.
db-password=*********
# The full database JDBC URL. If not provided, a default URL is set based on the selected database vendor.
db-url=jdbc:postgresql://ep-green-recipe-74532497.us-east-2.aws.neon.tech/login
# Observability
...

Note: The replaced URL for your Neon Postgres JDBC should look something like _db-url=jdbc:postgresql://ep-green-recipe-74532497.us-east-2.aws.neon.tech/login_. However, if SSL is required for your Neon Postgres connection, add it to the JDBC URL: _db-url=jdbc:postgresql://ep-green-recipe-74532497.us-east-2.aws.neon.tech/login?sslmode=require_.

Step 2: Start Keycloak:
Open a terminal or command prompt and navigate to the directory where you extracted Keycloak.



cd <keycloak folder name>

Next, open the Docker container and log in the run keycloak with docker using the command prompt:



docker run -p 8080:8080 -e KEYCLOAK_USER=admin -e KEYCLOAK_PASSWORD=admin jboss/keycloak

Note: You can change admin to a more secure username and password for production environments. Also, check Docker's availability and status before running the Keycloak container.

This command starts a Keycloak server with the admin username and password set to admin. Access it via http://localhost:8080.

Click on the Administration Console to log in with your username and password.

Verifying the setup

To test the connection, go to your command prompt and type

\dt

Viola! You have successfully set up Keycloak and Postgres using Neon!

Additionally, you can verify the connection to the Postgres database through Keycloak.

Verify that the changes made in Keycloak (like a new user) are reflected in the database. This confirms that Keycloak is connected and able to modify the database.
In the Keycloak Admin Console, try performing an operation requiring database access, such as creating a new user or realm. If you can perform these operations without errors, it implies that Keycloak successfully communicates with the Neon Postgres database.
Inspect the server logs for any errors related to database connectivity. If Keycloak starts without any database connection errors, it's a good sign that the connection is successful. Keycloak logs typically show errors if they cannot connect to the database, like connection timeouts, authentication failures, or configuration issues.

Tips and troubleshooting guide

Here are some tips and troubleshooting ideas that could be useful when setting up Keycloak and Postgres using Neon:

Keycloak on Neon and Postgres: Tips for installation and use

Ensure compatibility: Ensure that all components (Keycloak, PostgreSQL, Neon) are compatible with each other and your system before you start.
Use secure credentials: Use secure and unique passwords for the database and Keycloak admin accounts in production environments.
Backup regularly: Make a backup copy of your database and the Keycloak configuration to avoid data loss.
Keep software updated: Always update Keycloak, Postgres, and other software and ensure you have the latest security patches and features.
Monitor performance: Keep checking on the performance of both Keycloak and Postgres. Tune configurations for top-notch performance.
Leverage Neon features: Take advantage of Neon’s cloud-native characteristics, such as automatic scaling and increased security functionalities.
Document your configuration: Maintain a log of your setup and configuration settings. This is very crucial for troubleshooting and as a reference.

Troubleshooting common issues

Connection issues: Ensure the right connection string is specified and your network can connect to the database service.
Authentication problems in Keycloak: If you experience login problems with Keycloak, check the user credentials and see if the Keycloak server is working correctly.
Database connection errors: Ensure that the JDBC URL used in the Keycloak configuration points to the Neon Postgres database correctly. Also, ensure that the database is running and is accessible.
Docker container issues: Ensure that the Docker is installed correctly and running well if the Keycloak Docker container is not working properly. Look for any error messages when starting the container.
SSL configuration errors: Ensure the SSL mode is set in the JDBC URL and all needed certificates are available if you apply SSL.
Table creation or Data insertion errors: Verify the SQL syntax and ensure the user has the necessary privileges in the database.
Performance issues: If there is lag or slow performance, look into the database and server logs for any errors or bottlenecks that may be causing the problem—improved resource utilization through adjustment of configurations.

Use the command prompt to check logs:



docker logs [keycloak_container_id]

Conclusion

In summary, integrating a PostgreSQL database with Keycloak Neon is a reliable strategy for handling identity and access on the web. In this article, we walked through setting up the components step-by-step. Following this guide, you can use this integration's performance, scalability, and security gains.

The setup we covered ensures a secure and reliable identity management system and lays the foundation for you to scale and optimize your application’s performance. As technology develops, this integration provides a stable basis for adaptation and advancement of functionality to store users’ information securely and effectively.

References

How to use HTML in increasing website accessibility

Okafor Peace Ngozi — Tue, 04 Jul 2023 08:00:00 +0000

Learn how to increase website accessibility by using HTML techniques. Enhance the user experience and make your website more inclusive for individuals with disabilities. Discover practical tips to improve website accessibility and create an inclusive online environment.

Overview

Website accessibility is essential for creating an inclusive online experience. By using HTML to prioritize accessibility, you can ensure that individuals with disabilities can access and navigate your website effectively.

This post will explore practical HTML techniques that can significantly enhance website accessibility. It will provide code examples and explanations to help you implement these techniques in your projects.

What is website accessibility?

Website accessibility refers to the practice of designing and developing websites in a way that ensures equal access and usability for all individuals, including those with disabilities. It removes barriers that may prevent people with disabilities from perceiving, understanding, navigating, and interacting with web content effectively. Website accessibility aims to provide an inclusive online experience, regardless of a user's physical or cognitive abilities.

Accessible websites enable individuals with disabilities to access and interact with content using assistive technologies such as screen readers, speech recognition software, alternative input devices, and more. These technologies rely on well-structured HTML, descriptive text alternatives for images, keyboard navigation support, and other accessible design practices to provide an equivalent experience for users with disabilities.

Semantic HTML for Structural Clarity

Semantic HTML provides meaningful structure to your web content, enabling assistive technologies and search engines to understand better and navigate your website. Let's consider an example of creating a navigation menu using semantic HTML:

<nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>

The <nav> element indicates the navigation section in this code snippet. The <ul> element represents an unordered list, and each menu item is represented by <li> and <a> tags. By using these semantic tags, assistive technologies can understand the purpose of the content, making navigation more accessible.

Alternative text for images

Images are an integral part of web design, but they need alternative text (alt text) to be accessible to visually impaired users. Here's an example of how to provide alt text for an image:

   <img src="image.jpg" alt="A group of Hackmamba Writers.">

In the above code, the alt attribute contains a concise and descriptive text alternative for the image. Screen readers will read this alt text aloud, allowing visually impaired users to understand the content and context conveyed by the image.

Accessible forms for user interaction

Forms are common elements on websites and should be accessible to all users. Let's consider an example of an accessible form with proper labeling and instructions:

<form>
      <label for="name">Name:</label>
      <input type="text" id="name" name="name" required>

      <label for="email">Email:</label>
      <input type="email" id="email" name="email" required>

      <button type="submit">Submit</button>
    </form>

Each <label> is associated with its corresponding form element in this code snippet using the input field for the attribute and the id. This association ensures that screen readers announce the label when the input field receives focus, making it easier for users to understand the purpose of each field.

Keyboard accessibility for navigation

Keyboard accessibility is crucial for users who cannot use a mouse or other pointing devices. Here's an example of how to make a navigation menu keyboard accessible:

<nav>
      <ul>
        <li><a href="#" tabindex="0">Home</a></li>
        <li><a href="#" tabindex="0">About</a></li>
        <li><a href="#" tabindex="0">Services</a></li>
        <li><a href="#" tabindex="0">Contact</a></li>
      </ul>
    </nav>

This code snippet adds the tabindex attribute to each menu item, allowing users to navigate the menu using the Tab key. The value "0" ensures that the menu items follow the natural tab order.

Proper heading hierarchy for content structure

Using a proper heading hierarchy helps users understand the organization of your content. Let's consider an example of correctly structuring headings:

<h1>Welcome to Our Blog</h1>

    <h2>Introduction</h2>
    <p>...</p>

    <h2>Benefits of Accessibility</h2>
    <p>...</p>

This code snippet uses the <h1> heading for the main title and <h2> headings for section titles. This hierarchical structure helps screen readers and users navigate the content easily.

Conclusion

Implementing HTML techniques that enhance website accessibility is crucial for providing an inclusive user experience. By using semantic HTML for structural clarity, providing alternative text for images, creating accessible forms, ensuring keyboard accessibility, and using proper heading hierarchy, you can significantly improve the accessibility of your website.

By following these practices, you'll be on your way to creating a more inclusive and user-friendly website for individuals with disabilities. Remember to test your website's accessibility using tools and guidelines like the Web Content Accessibility Guidelines (WCAG) to ensure compliance with the highest accessibility standards.

Resources

HTML Accessibility
Understanding HTML Techniques for Improving Web Accessibility
A Beginner's Guide to HTML Accessibility

Harnessing the Power of Machine Learning: Practical Applications in Software Development

Okafor Peace Ngozi — Mon, 12 Jun 2023 07:27:18 +0000

Explore the practical applications of machine learning in software development, leveraging its power to enhance productivity, automate tasks, and optimize processes.

Overview

We are in a fascinating world where machine learning meets software development! A realm where intelligent algorithms collaborate with developers, optimizing processes, automating tasks, and unleashing the true potential of software applications.

In this fast-paced digital era, software development has evolved into a dynamic field, constantly seeking innovative solutions to meet the ever-growing demands of users. With its ability to analyze vast amounts of data, discover patterns, and make informed decisions, machine learning has emerged as a game-changer in this domain.

From intelligent code completion that anticipates your next move to automated bug detection that uncovers hidden flaws, machine learning algorithms are revolutionizing how software is built. They empower developers to streamline workflows, enhance software quality, and deliver exceptional user experiences.

But it doesn't stop there. Machine learning also powers cutting-edge applications like natural language processing, enabling chatbots and voice assistants to understand and respond to our queries with astonishing accuracy. Visual UI testing becomes a breeze with image recognition algorithms that automate the verification process, ensuring pixel-perfect interfaces across different platforms.

Join us in exploring practical applications, where we'll dive deep into how machine learning transforms software development. Get ready to witness the integration between human creativity and artificial intelligence and discover how harnessing the power of machine learning can take your software development skills to unprecedented heights.

Understanding Machine Learning Fundamentals

Before diving into practical applications, it is crucial to grasp the fundamental concepts of machine learning. Machine learning can be broadly categorized into supervised, unsupervised, and reinforcement learning. These techniques enable computers to learn from data and make predictions or take actions without being explicitly programmed.

A machine learning system consists of several key components, including data preprocessing and feature engineering, model training and evaluation, and model deployment and monitoring. These components work together to create powerful and accurate machine-learning models.

Practical Applications of Machine Learning in Software Development

Predictive Analytics: Machine learning enables software applications to predict future outcomes based on historical data. This application finds its use in customer behavior analysis, recommendation systems, and fraud detection and prevention.
Natural Language Processing (NLP): NLP leverages machine learning to understand and process human language. Sentiment analysis, text classification, language translation, and chatbots are some practical applications of NLP in software development.
Computer Vision: The software can analyze and interpret visual data using machine learning algorithms. Object detection, image recognition, facial recognition, and biometric systems are examples of computer vision applications in software development.
Anomaly Detection: Machine learning models can identify unusual patterns or behaviors in data, making them valuable for detecting network intrusions and monitoring system health.

Challenges and Considerations in Harnessing Machine Learning

While machine learning offers immense potential, there are challenges and considerations to keep in mind when incorporating it into software development:

Data quality and quantity: High-quality and diverse datasets are essential for training accurate machine learning models. Acquiring and preprocessing relevant data can be a time-consuming and complex process.
Ethical considerations and bias: Machine learning models can inadvertently perpetuate bias or discrimination present in the training data. Addressing ethical considerations and ensuring fairness when deploying machine learning solutions is crucial.
Model interpretability and explainability: As machine learning models become more complex, interpreting and explaining their decisions can be challenging. This poses challenges in scenarios where transparency is required.
Scalability and computational resources: Training and deploying machine learning models require significant computational resources. Scalability becomes a concern when dealing with large datasets or real-time applications.

Best Practices for Incorporating Machine Learning in Software Development

To harness the power of machine learning effectively, it is important to follow the best practices:

Clearly define the problem statement and goals: Clearly articulate the problem you aim to solve and establish specific goals for your machine learning project.
Acquire and preprocess relevant data: Collect and preprocess data that is relevant, diverse, and representative of the problem domain.
Select appropriate machine learning algorithms and techniques: Choose the most suitable ones based on the problem type and available data.
Train and evaluate models effectively: Split your data into training and evaluation sets, train your models, and rigorously evaluate their performance using appropriate metrics.
Deploy and monitor models in production: Once a model is trained, deploy it in a production environment and continuously monitor its performance to ensure it remains effective and accurate.
Continuously iterate and improve the models: Machine learning models are not static; they can be improved over time. Continuously gather feedback, retrain models, and iterate to enhance performance.

Real-World Examples of Machine Learning in Software Development

Real-world examples demonstrate the impact of machine learning in software development:

Netflix's recommendation system: Netflix uses machine learning algorithms to analyze user preferences and provide personalized recommendations, enhancing the user experience.
Google's language translation services: Google Translate leverages machine learning to provide accurate translations between languages, enabling seamless communication across cultures.
Uber's surge pricing algorithm: Uber's pricing algorithm utilizes machine learning to determine fare prices based on supply and demand, optimizing revenue while balancing rider and driver satisfaction.
Facebook's facial recognition technology: Facebook uses machine learning to identify and tag individuals in photos, providing users with a convenient and user-friendly experience.

Future Trends and Emerging Technologies in Machine Learning

The future of machine learning in software development holds exciting prospects:

Reinforcement learning and self-learning systems: Reinforcement learning, where software agents learn from trial and error, has the potential to create self-learning systems capable of adapting to new situations.
Generative adversarial networks (GANs) and synthetic data generation: GANs can generate synthetic data that resembles real data, expanding possibilities in areas with limited datasets.
Edge computing and Internet of Things (IoT) applications: Machine learning on edge devices and IoT devices will enable real-time and decentralized decision-making, reducing latency and enhancing privacy.
Explainable AI and responsible AI practices: There is a growing focus on developing models to explain their decisions, fostering transparency and ethical use of machine learning.

Final Thought

Machine learning has become a game-changer in software development, unlocking innovative applications and transforming industries. By understanding the fundamentals, embracing best practices, and considering the challenges, software developers can harness the power of machine learning to build intelligent and impactful solutions.

As machine learning continues to evolve, its potential to shape the future of software development remains immense. Embrace the possibilities and embark on the journey of unlocking the true potential of machine learning in your software projects.

So, embrace the power of machine learning, explore its practical applications, and embark on the path to creating innovative and impactful software solutions that shape the future. The possibilities are limitless, and the time to harness the power of machine learning in software development is now.

Resources

Build a lightweight Ecommerce Storefront by integrating Cloudinary & Xata, and Deploy to Netlify

Okafor Peace Ngozi — Wed, 23 Nov 2022 22:04:50 +0000

This post presents a step-by-step guide on integrating Cloudinary & Xata to an HTML and CSS static e-commerce website and Deploying to Netlify. Stay on this guide!

Cloudinary allows you to upload millions of images and videos to a website or application without needing any third-party software. Xata is a serverless tool that will enable developers with no coding experience to build software and applications without managing multiple applications. Also, with Netlify, you can deploy your application live and show it to other developers for review without paying for a hosting company.

In this article, I created the basic structure of an e-commerce website using HTML and CSS, then integrated a Cloudinary solution for uploading files. I integrated Xata.io as a database solution for storing the data uploads and finally deployed it to Netlify. This article will guide you on how to carry these out quickly.

GitHub URL:
We completed this project on GitHub.

https://github.com/Ladyprowess/ecommerce-website-on-cloudinary

Prerequisite

A Windows operating system
A Xata account. Sign up here if you don’t already have an account
A Cloudinary account. Signup here if you don’t have an account
A VScode editor or any other editor like sublime or notepad. Building an Ecommerce Website with HTML and CSS

An e-commerce solution provides business owners with the leverage to advertise and sell their products online or over the internet.
Step 1: Download VScode on your Windows computer and launch.
Step 2: Create a new folder on your desktop where you will save all your project. Go to file and click on New File to start a new project.
Step 3: Start your <!DOCType.html> and save with index.html inside your created folder.

This is the HTML code I used for this project.

https://gist.github.com/Ladyprowess/7b014124d03ceb2854b94c50adc9e852
Step 4: For CSS, do the same thing by going to file and clicking on New File to start a new project.
Step 5: Start your CSS code and save it with style.css inside your created folder.

This is the CSS code I used for this project.

https://gist.github.com/Ladyprowess/ce8322ac5fceb59ec934644bda1d7df2

How to integrate Cloudinary into the Ecommerce website

Cloudinary is a SaaS technology company that provides an end-to-end video and image management solution for mobile applications and websites.
Step 1: Go to Cloudinary on your browser and SIGN UP FOR FREE. You can sign up with Google, Github, or your Email.

Step 2: Once you have signed in, the dashboard will appear like this:

Step 3: Create the HTML and CSS code to insert Cloudinary into the e-commerce website.
CSS code

.cloudinary-button {
display: flex;
float: left;
position: relative;
width: 100%;
height: 60%;
border: 3px solid red;

}

HTML code

<button id="upload_widget" class="cloudinary-button">Upload Product Image</button>
    <script src="https://upload-widget.cloudinary.com/global/all.js" type="text/javascript"></script>

After you have signed in to Cloudinary, click on dashboard in the menu option. The cloud name is available at the account details option. Copy it as you will need it in your HTML code.

Adding an upload preset
With upload presets, you can set up options for uploading assets in one place instead of doing it for each upload call. You can set up more than one upload preset and use each in different upload situations.
To get our upload preset, take the following steps:

Go to Settings
Scroll to Upload Preset and Click on add upload preset.
Input the Upload preset name, change the Signing mode to Unsigned, and Click Save.
Copy the Upload preset name and paste it into your HTML code.
uploadPreset: 'lady_prowess'
Lastly, save your HTML code and run it on your browser. Here is what your website should look like:

After you are done with this section, here is how our index.html file looks:

    <script type="text/javascript">  
    var myWidget = cloudinary.createUploadWidget({
      cloudName: 'dii62jcmk', // replace with your cloud name
      uploadPreset: 'lady_prowess'}, (error, result) => { //replace with your upload preset
        if (!error && result && result.event === "success") { 
          console.log('Done! Here is the image info: ', result.info); 
        }
      }
    )

    document.getElementById("upload_widget").addEventListener("click", function(){
        myWidget.open();
      }, false);

    </script>

Here is the link to the HTML code:

https://gist.github.com/Ladyprowess/7f2fe13b731f6a2273f0d0949f7502fa

How to integrate Xata.io into the Ecommerce website

Xata.io is a serverless database for Jamstack apps that combines the power of a traditional database, making it easier to manage, consume, and store data.
Step 1: Go to https://xata.io/ and click start building for free you will; have the option to signup with Google, Github, or your Email.
Step 2: From the dashboard, click start from scratch

Step 3: Type the table name and click Add Table.

Step 4: Click the plus sign (+) and add a String; name your string “label”

Step 5: Click the plus sign (+) again and add a Boolean; name your boolean “done”

Step 6: Click the Add record and name the label “upload” and “create record”.

Step 7: Click on Get code snippet, copy the Javascript code snippet and paste it into your HTML code. Then save your HTML code.

// Generated with CLI
    const { getXataClient } = require("./xata");

    const xata = getXataClient();

    const page = await xata.db.upload.getPaginated({
      pagination: {
        size: 15,
      },
    });

    console.log(page.records);

Watch this video to learn how to create data on Xata using Next.js
Go to the playground tab and run the generated code. You will get a response indicating the setup of your database, meaning it works.

When you are done with this section, here is how our index.html file looks.

https://gist.github.com/Ladyprowess/7b014124d03ceb2854b94c50adc9e852

How to deploy the Ecommerce website in Netlify

Netlify is a cloud computing company for developers that serve as a web hosting and automation platform to improve productivity.
To create a free Netlify account, visit this page and sign up for free.

Step 1: Connect Netlify to your GitHub account

Step 2: A new page will appear for you to Get started. Fill in the details.

Step 3: Deploy your first application. You can choose to import from GIT or import MANUALLY. However, I imported them manually since the codes were already on my local computer.

Step 4: It’ll show published once it has been deployed by netlify. Click on the link to view your website.

End Point: https://quiet-fudge-28b95d.netlify.app/

How to test if your Cloudinary Integration Works

Step 1: Go to your Netlify link.
Step 2: Click the Upload Product Image. You will get a pop-up showing you to upload an image from any folder of your choice.

Step 3: After uploading the image, click Done

Step 4: After uploading the image, the transformation in your Cloudinary dashboard will indicate the number of images uploaded.

Also, you can visit the Media Library to see the image that has been uploaded.

Conclusion

This article is of immense benefit to developers of an e-commerce website. A Cloud platform for storing databases offers various benefits, including flexibility, dependability, security, and affordability, delivering a sturdy base on which to construct cutting-edge applications for business use. In particular, they can rapidly adjust to shifting workloads and demands without adding to the burden of work for teams already working at total capacity.

Resources

Cloudinary
Xata