app Archives - Online Code Generator

Build Your Own Little Menu Bar App for All Those Things you Forget

Posted on June 3, 2022May 21, 2023 by Mark Feehily0

I have a little Pinned Pen of Things I Forget that I revisit quite a bit… when… I forget… things. It occurred to me the other day that it would be even more convenient as a menu bar app (macOS) than a Pen. Maybe an excuse to learn Swift? Nahhh. There’s always an app for that. I know Fluid can do that, but I wasn’t 100% sure if that’s up to date anymore or what. As I happen to be a Setapp subscriber, I know they have Unite as well, which is very similar.

So let’s do this! (This is a macOS thing, for the record.)

1) Make a little website of Things You Forget that allows you to one-click copy to clipboard.

You don’t need a special URL or anything for it. And good news, CodePen Projects can deploy your Project to a URL with a click.

Here’s my example Project.

2) Deploy it

Now I click that Deploy button in the footer and can kick it out to a live-on-the-internet URL easily.

3) Turn it into a Menu Bar App with Unite

Then I launch Unite and give it the barebones information it needs:

That’ll instantly make the app. It takes like 2 seconds. From here, two things:

Paste a better image into the Get Info window so you can have a cool icon.
If you’re on an M1 Mac, you might have to click the “Open using Rosetta” icon in order for it to work.

That second one is a little unfortunate. Makes me wish I tried Fluid, but hey, this ultimately worked. You’ll know you need to do it if you see this:

4) Enjoy

A totally custom-designed app to help your own brain!

The post Build Your Own Little Menu Bar App for All Those Things you Forget appeared first on CodePen Blog.

What is CRUD? How to create a CRUD app?

Posted on October 29, 2021June 3, 2023 by 0

What are CRUD and CRUD operations examples?
CRUD and REST
Parts of the CRUD app
Creating CRUD apps traditional way
Create CRUD app with Flatlogic
Conclustion

Modern web development involves user interaction with databases. As a rule, the user needs to perform some actions with the database. Usually, there are 4 actions: create, view, update and delete something. This is how we come to the acronym CRUD – an abbreviation for these four actions.

If you have ever worked with databases, then for sure you’ve worked with CRUD – even if you didn’t know it. CRUD operations are often used with SQL. Since SQL is very popular in the developer community, it is very important for developers to understand how CRUD operations work.

One good thing about the CRUD paradigm is that it helps the developer build complete applications.

Let’s see how this works with a simple abstract object in any application: we’ll use something like pseudocode to describe this object. We will provide a system for registering students in a college. In this system there will be a “student” object that looks like this (carefully, pseudocode!):

“Student”: {
“id”: <Integer>,
“First_name”: <String>,
“Last_name”: <String>,
“Course”: <String>
}

In order to manage this system, we must perform certain manipulations with the student object. So, let’s move on to the next section where we will describe each CRUD operation in more detail .

Most applications on the internet are actually CRUD applications. For instance, let’s take Facebook as one of the common examples – it’s just a CRUD application where users can create, delete, change information about themselves, and read information about other people. CRUD apps are used on a daily basis by various businesses and organizations to maintain their day-to-day workflows.

What are CRUD and CRUD operations examples?

The CRUD concept was not originally conceived as a modern way to create APIs. CRUD actually has its roots in database records. Most modern web and mobile applications contain some form of CRUD functionality. In addition, most programmers have to deal with CRUD at some point. So, a CRUD application would be one that utilizes forms to retrieve and return data from a database.

A relational database consists of tables with rows and columns. In a relational database, each row in a table is called a record, and each column in the table represents a specific attribute or field. Users can call four CRUD functions to perform different types of operations on selected data in the database. This can be done through code or through GUI. Now, let’s take a look at each function separately.

CREATE – this feature will add a new student to the app/database by some trigger, for example, by pressing the “Add” button in the application, which will call the corresponding function. The program calling the function would supply the values for “first_name”, “last_name”, and “course”. After the function is called, a new student record will appear in the database.

READ – this function allows you to see if there is a record about a specific student in the database. This function does not change the information about the student in any way, but only allows you to get information about him. You can also see a certain attribute.

UPDATE is a function that changes information about a student. Let’s write his name. After the function is applied, the corresponding record in the database table will be changed.

DELETE – of course, everything should be clear here. This function either completely removes the object or removes its selected attribute.

By definition, CRUD is more of a cycle than an architectural concept. There are several CRUD loops in any web application. For example, in an online store, a customer can CREATE an account, UPDATE account information, and DELETE items from the cart. At the same time, a store admin using the same web application can CREATE shipping records, READ them as needed, and UPDATE supply lists.

CRUD and REST

Let’s now take a look at the concept of CRUD in the context of using our favorite web applications. Most often, REST architecture is used to execute CRUD operations in web applications. REST is just a concept, a set of rules. It uses HTTP protocols like GET, PUT, POST to link resources to actions within a client-server relationship. If we apply these rules to the application, then we are already talking about RESTFul.

So, for example, each letter in CRUD can also be mapped to an HTTP protocol method:

OPERATIONS
HTTP PROTOCOL

Create
Post

Read
Get

Update
Put

Delete
Delete

Thus CRUD is a cycle that can be mapped to REST, by design. In a REST environment, CRUD often corresponds to the HTTP methods POST, GET, PUT, and DELETE, respectively.

Parts of the CRUD app

Database

The database is where your data is stored. A database management system is used to manage the database. There are several types of database management systems, which are subdivided depending on how they store data: relational (SQL) and document (NoSQL). In this article, we talk about relational databases. SQL databases consist of tables. Tables consist of records. Records consist of fields. Fields consist of data.

User Interface or Front-end

The front-end, or User Interface, helps people interact with the application and database.

Back-end or APIs

Finally, the back-end informs your database of what functions to perform. These functions can be modeled in different ways, but they are still designed to perform four basic CRUD operations.

Creating CRUD applications traditional way

In order to develop a basic CRUD application from scratch, you will need a fairly good knowledge of javascript or front-end frameworks, one of the programming languages for the back-end, and knowledge of databases. You will also want to know one of the ORMs.

Let’s take a quick look at the steps you will have to go through to write a React + Node.js + PostgreSQL CRUD application.

Prerequisites

Install React;
Install Node.js;
Install PostgreSQL.

Front-end part

Use one of the React starter apps and learn it. For example, it may be created react app;
Install all required modules (react-router, redux, etc.);
Create Initial pages of your application;
Create components that will help perform CRUD functions – buttons, forms, etc.;
Connect the front-end part to back-end;
Setup form validation;
Develop react pagination (optional);
Develop react tables (optional);
Setup fetching the data form created database;
Create entire application styles;
Develop UI/UX of the application (optional);
You should do the client part responsive;
Write tests (optional).

Back-end and database part

Install Node Dependencies;
Setting up PostgreSQL Database;
Define Sequelize Schema;
Create Routes Using ExpressJS (develop REST API).

Hosting

It is one of the hardest parts.

Host the application;
Set up CI/CD.

Almost all of the steps described above apply to other technologies, be it Vue or Angular, Laravel or Python, PostgreSQL, or MySQL.

Guides on how to create a CRUD application

We have also selected for you some of the valuable guides on how to create a custom CRUD app:

CRUD app on Mongo DB and Express;

React CRUD app using React context API;

React + Node.js+ MongoDB CRUD app.

Thus, in order to build even a basic CRUD application, you will need knowledge of several technologies and will have to spend a lot of time studying and developing repetitive work – not to mention new requests for the development of additional features.

In the next section, we will look at an alternative way to develop a CRUD application that will save you a lot of time, not holding you back in the possibilities of customization and ownership of the source code.

Create CRUD app with Flatlogic

In our example, we will build a small-time tracking application with several entities. The application will have a screen with users, projects, and records that will be linked to each other. These entities can be managed using CRUD operations.

Goals

You should be able to build any CRUD application like a time tracking app after this tutorial using Flatlogic Generator;
You should be able to understand basic principles of CRUD concept and database architecture;
You should be able to create your own entities with custom relationships and parameters.

1. Planning the application

Application development with Flatlogic Generator consists of several stages. The first is to actually sort out what kind of application you will make. After that, plan what entities the database will consist of and what this application will be used for.

We mentioned above that we will be developing a time tracking application. Our application will consist of three entities (tables in the database):

Users

This table will contain users of our application with different roles. Flatlogic Generator creates this table by default and does not prompt to delete it.

Records

This table will store the time spent records associated with projects and users. We will look at the more detailed contents of this table in the next steps.

Projects

This table will store data about projects. We will also consider filling this table with columns in more detail in the next steps.

2. Register account in Flatlogic Generator

So, for better interaction with Flatlogic Generator, firstly we advise you to create an account on the Flatlogic website before you develop an application.

To create an account on the Flatlogic website, simply click ‘Sign in’ in the header (see screenshot below).

Next, you will be redirected to the account creation page, where you will have 2 options – create an account using email or do it using GitHub integration.

After that, simply confirm the email and begin work with a Flatlogic Generator website. For detailed info on how to interact with your account please refer to the documentation.

3. Choose the stack and project name of CRUD app

This step will allow you to choose your project stack and project name. The stack consists of three parts:

Frontend;
Backend;
Database.

In each part you will have the following options to choose from:

The front end has React, Angular, and Vue frameworks;
Backend for now has only two options – Node.js and Laravel. We are planning to add Java, Python, .NET options;
There are two options for databases: MySQL and PostgreSQL. We are planning to add MongoDB in the near future.

Thus, you have more than 20 options to choose from to create your web application

4. Choose the design

Considering the design, there are five options now: Material, Classic, Transparent, and two of our internal Flatlogic design systems. Please note that some stacks have fewer design options, for example, Angular has only three design options.

5. Define the database schema

To create, manage and store the data related to the time tracking app, we will use Flatlogic Generator schema editor. Flatlogic generator allows you to create content types for the entities in your app. It exposes entities via generated API, which you can use to populate the frontend.

The basic essence of the Scheme Editor is that it consists of tables and columns – in your work you will deal with them.

If you choose to build an application from scratch, then you will see a button to add a table as well as a ready-made default table for Users (since we believe a user exists in any application).

By clicking on the ready-made Users tab, you will see in front of you all the columns created in the table with its properties. In our exemplary time tracking application, the Users entity stays default – we will not add new columns to it.

Working with tables, you have 2 options – add a new table or delete it. Now let’s take a look at each of these steps separately.

When working with columns, you have 3 options – add or remove a column, or change the properties of the column.

Adding Records and Projects tables

As mentioned above, our application should have Records and Projects tables.

So, in order to add a table, you need to press the ‘Add Table‘ button (see screenshot below).

After clicking the button, a new table will be added and you will be prompted to select a name for this table. Please choose the name in lower case. In our case, we need to add two Records and Projects tables.

Adding column

In order to create a column, click on the table in which you want to create a column and then click on the ‘Add column’ button.

When you click on the column, you can edit it. Edit column window with the following parameters will open on the right side (see the screenshot):

Name – here you specify the name of the column that you will see in your database. Please, use a camel case for column names.

Title – title of the column that you will see in your live application. Here you can use capital letters and any names, as this does not affect the generation and operation of the application.

Type – in this menu you can select the data type of the column.

The following types are offered to choose from:

String – when you select this type, you have a unique Multiline option that adds multiple lines;
Int;
Decimal;
Date;
Boolean – when choosing this type, you need to set the value to True or False;
Images;
Datetime.
Relation_one;
Relation_many;
Enum.

Unique – enables or disables the column uniqueness option;

Show in the list – option allows to show the column as a list;

Show in form – allows you to show the column in the form.

So let’s add the following columns according to their tables.

To the Records the table we add the following columns:

Task – this column will contain the names of the completed tasks

Type
String

Ref
–

Unique
False

Show in Table
True

Show in Form
True

Hours – a column with the information on time spent on task

Type
Decimal

Ref
–

Unique
False

Show in Table
True

Show in Form
True

User – a column with data about the user who created the job record. Please note that the type here is relation_one and a link to the users table

Type
relation_one

Ref
users

Unique
False

Show in Table
True

Show in Form
True

Submitted – this column will contain information about the status of the job

Type
boolean

Ref
–

Unique
False

Show in Table
True

Show in Form
True

Project – a column with information about the project to which the task belongs. The column will also be linked to the projects table

Type
relation_one

Ref
projects

Unique
False

Show in Table
True

Show in Form
True

In the Projects table we add the following columns (see the screenshot below):

Name – in this column, we will store the name of the project. The column must be created with the following parameters

Type
String

Ref
–

Unique
False

Show in Table
True

Show in Form
True

Rate – a column with information about the hourly rate at which the project is being executed

Type
Decimal

Ref
–

Unique
False

Show in Table
True

Show in Form
True

Start_date – the column with information is the start date of the project

Type
Date

Ref
–

Unique
False

Show in Table
True

Show in Form
True

End_date – a column with the date of the end of the project

Type
Date

Ref
–

Unique
False

Show in Table
True

Show in Form
True

This completes our database schema. Let’s move on to the last step of creating the CRUD application.

6. Create CRUD app

So, after you have defined your database schema, you will be redirected to the final step in the development wizard. All you need in this step is to check your tech stack and design – and then push the ‘Create Project‘ button.

After that, the system will transfer you to the screen with your created projects. At the same time, your application code will already be generated.

By clicking on the project name, you will be taken to the settings page with additional information about the project, where you can familiarize yourself with the following functions.

7. Working with CRUD project/application

Overview of project

After you click on project name you will be taken to the overview of the project page, where you will see information about the project, as well as the various functions you can apply to it.

Download the code to customize

For example, you can download the full source code of a Flatlogic Generator project to continue developing in your favorite IDE. To do this, click on the Download button and get a subscription to one of the paid plans (which can be canceled at any time).

See the live demo

Before downloading the code, you can also watch the live demo of your project. To do this, click on the Deploy button on the overview tab opposite the Live URL line.

Now, the project begins to build. In a few minutes, you will receive a demo of a real working application.

After the application has been created, we can see the result. For example, here are screenshots from the demo of our Time-tracking app, which we created with the Records and Projects entities. In these screenshots, you can see that the application complies with the CRUD concept since we can create new records, modify, delete and view them.

Creating a new record:

See generated API

Along with generating code, Flatlogic Generator creates an API for the generated application. For example, here is a link to the created API for the time-tracking app we created earlier: API for Time-tracking app in Swagger.

Push code to the Github repository

You can push the code of the created application into the GitHub repository, which will be created specifically for the generated application. At the same time, editing the project database schema, Flatlogic Generator will push the new code into the previously created repository.

To connect to Github – click the Push to Github button.

See the code preview

Before subscribing to a project or downloading it, you can see the structure of the project code and the code itself. To do this, click on the Code Preview tab.

Edit the schema of the CRUD application

You can change the database schema of your application an infinite number of times. Click on the Schema tab to go to the schema editor and add/remove/modify entities for your project.

CRUD application settings

In the Settings tab you can do the following:

Change the name of the project;
Add a new subscription;
Download the source code;
Push the code to GitHub;
Activate trial;
Delete Project.

Recap

Thus, we created a CRUD time tracking application based on the Flatlogic Generator and examined the main functions of this app development platform.

Feel free to try and join Flatlogic Generator! Register your free account and get started today.

If you’d like additional help when building your product, our thriving community forum is a great place to source actionable advice and resources. Or, you can send me your request to [email protected]. All creators are encouraged to ask questions within the community to help empower their journey.

Conclusion

In this article, we learned about the concept of CRUD, explained how to use it in application development, and put it in a REST context. We also looked at two ways to develop a basic CRUD application, the traditional way and the faster way with the Flatlogic Generator.

If you notice any errors in the article or want to supplement it – please contact me. Feedback is always welcome!

The post What is CRUD? How to create a CRUD app? appeared first on Flatlogic Blog.

Flatlogic Web App Generator+GitHub!

Posted on October 21, 2021June 3, 2023 by 0

Hello coders!

Our full-stack web app generator got integration with well-known and well-liked GitHub. Now you can add projects to your GitHub account where you will see a repository with the project made on the web app generator. If you make an update to your project in the generator, all the updates will be pushed to the repository.

Thanks to GitHub version control, you will be able to keep track of all your changes made to the source code. All the changes in your generated project will be saved and shown in the appropriate repository in your GitHub account! This way you synchronize and closely monitor your tests and projects from Web App Generator with GitHub.

Setting Up

How to make it work?

Connect your GitHub account in the project settings.

How to generate a project with web app generator?

Let us recall how to work with the web app generator step by step:

Choose the technology stack for your project: React, Vue, Angular – for the frontend part,
Laravel, Node.js – for the backend part and MySQL, PostgreSQL for database;
Choose the design you like;
Define the database schema;
Generate your application, get the source code and download it!

Check our recent blog posts to know more on the web app generator

Code preview added
Laravel Backend Released
Launching Web App Generator

The post Flatlogic Web App Generator+GitHub! appeared first on Flatlogic Blog.

Lambo “config” and “after” scripts for even better quick Laravel app creation

Posted on October 13, 2021June 3, 2023 by 0

If you’re not familiar with Lambo, it’s a command-line tool I built to quickly spin up a new Laravel application and take some of the most common steps you may want to at the beginning of each project. Check out our writeup on the Tighten blog if you want to learn more.

The itch

I use Lambo all the time. I create a lot of apps, yes, but I also write and teach about Laravel a lot. Before Lambo, I would hack my examples and tests into a pre-existing app to make sure things worked the way I wanted. With Lambo, I now just spin up a quick new Laravel install every time I need to test anything. I love Lambo.

I love the customization flags you can pass into Lambo. “I want to open the code in Sublime Text, the site in Chrome, and I want to run npm install afterward.” Cool.

But the switches are hard to remember; and, honestly, it’s harder to remember to even type them. lambo MyApplication -e subl -q imconfused -zztop… more often than not I type lambo MyApplication and then two seconds later yell “crap” and CMD-c and try to re-do it with the right flags. At that point, Lambo’s still faster than not-Lambo, but it’s starting to bother me.

And, of course, there are still some common tasks that you could never perform with Lambo—for example, installing your use-on-every-app packages.

Introducing the config file

So, I made an issue. I had some discussion with folks who take a look at Lambo’s issues, and we came up with the idea of a config file that lets you set your defaults.

Thanks to @_cpb, you can create a config file (which lives in ~/.lambo/config) that’s a .env-style set of key/value pairs. Each key represents one of the variables that is toggled by one of the command-line flags. This way, you do’t have to remember to always set your code editor; just set it once in config and it sticks.

Just upgrade to the latest (composer global update tightenco/lambo) and then create a config file (lambo make-config). Here’s mine:

#!/usr/bin/env bash

PROJECTPATH=”.”
MESSAGE=”Initial commit.”
DEVELOP=false
AUTH=false
NODE=true
CODEEDITOR=subl
BROWSER=””
LINK=false

Edit that file and its flags will be passed to every new application you create with Lambo.

Introducing the after file

That covers you for remembering the config flags. But what about other operations you take every time you spin up a site?

We have you covered for that, too. Once again, I opened up an issue, we had some conversation, and a different contributer @quickliketurtle wrote the actual code. You can now create an after script (~/.lambo/after), a shell script that runs after Lambo’s normal processes, and you can define literally anything you want in there.

Here’s what mine looks like:

#!/usr/bin/env bash

# Install additional composer dependencies
echo “Installing Composer Dependencies”
composer require barryvdh/laravel-debugbar

# Copy standard files from ~/.lambo/includes into every new project
echo “Copying Include Files”
cp -R ~/.lambo/includes/ $PROJECTPATH

# Add a git commit after given modifications
echo “Committing after modifications to Git”
git add .
git commit -am “Initialize Composer dependencies and additional files.”

Just like with the config file, upgrade Lambo (composer global update tightenco/lambo) and then create an after file (lambo make-after). Edit that file and it will run every time after Lambo runs.

I put a nitpick.json file in that includes/ directory so my Nitpick config is set up right on every project I start.

Now it’s easier than ever to use Lambo to spin up the perfect Laravel application, every time.

Securing an Angular app which uses multiple identity providers

Posted on October 5, 2021June 3, 2023 by 0

Sometimes Angular applications are required to authenticate against multiple identity providers. This blog post shows how to implement an Angular SPA which authenticates using Auth0 for one identity provider and also IdentityServer4 from Duende software as the second. The SPA can logout from both of the identity providers individually and also revoke the refresh token used to renew the session using the revocation endpoint. The endsession endpoint is used to logout. IdentityServer4 also supports introspection so that it is possible to revoke reference tokens on a logout as well as the refresh token. The Angular application uses OpenID Connect code flow with PKCE implemented using the npm angular-auth-oidc-client library.

Code: https://github.com/damienbod/angular-auth-oidc-client/tree/main/projects/sample-code-flow-multi-Auth0-ID4

The angular-auth-oidc-client npm package can be added to the application in the App.Module class. We used an AuthConfigModule module to configure the settings and can keep the AppModule small.

import { NgModule } from ‘@angular/core’;
import { BrowserModule } from ‘@angular/platform-browser’;
import { RouterModule } from ‘@angular/router’;
import { AppComponent } from ‘./app.component’;
import { AuthConfigModule } from ‘./auth-config.module’;
import { HomeComponent } from ‘./home/home.component’;
import { UnauthorizedComponent } from ‘./unauthorized/unauthorized.component’;

@NgModule({
declarations: [AppComponent, HomeComponent, UnauthorizedComponent],
imports: [
BrowserModule,
RouterModule.forRoot([
{ path: ”, redirectTo: ‘home’, pathMatch: ‘full’ },
{ path: ‘home’, component: HomeComponent },
{ path: ‘forbidden’, component: UnauthorizedComponent },
{ path: ‘unauthorized’, component: UnauthorizedComponent },
]),
AuthConfigModule,
],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}

The AuthConfigModule configures the two identity providers. Both clients are setup to use the Open ID Connect code flow with PKCE (proof key for code exchange). Each secure token server (STS) has it’s specifics configurations which are required to use this flow. These configurations must match the corresponding client configuration on the token service of the identity provider. All identity providers have their own flavour of the Open ID Connect specification and also support different features. Some of these are worse, some are better. When implementing SPA applications, you should validate the required features supported by the identity provider.

import { NgModule } from ‘@angular/core’;
import { AuthModule, LogLevel } from ‘angular-auth-oidc-client’;

@NgModule({
imports: [
AuthModule.forRoot({
config: [
{
authority: ‘https://offeringsolutions-sts.azurewebsites.net’,
redirectUrl: window.location.origin,
postLogoutRedirectUri: window.location.origin,
clientId: ‘angularCodeRefreshTokens’,
scope: ‘openid profile email taler_api offline_access’,
responseType: ‘code’,
silentRenew: true,
useRefreshToken: true,
logLevel: LogLevel.Debug,
},
{
authority: ‘https://dev-damienbod.eu.auth0.com’,
redirectUrl: window.location.origin,
postLogoutRedirectUri: window.location.origin,
clientId: ‘Ujh5oSBAFr1BuilgkZPcMWEgnuREgrwU’,
scope: ‘openid profile offline_access auth0-user-api-spa’,
responseType: ‘code’,
silentRenew: true,
useRefreshToken: true,
logLevel: LogLevel.Debug,
customParamsAuthRequest: {
audience: ‘https://auth0-api-spa’,
},
customParamsRefreshTokenRequest: {
scope: ‘openid profile offline_access auth0-user-api-spa’,
},
},
],
}),
],
exports: [AuthModule],
})
export class AuthConfigModule {}

The checkAuthMultiple function is used to initialize the authentication state and begin the flows or whatever. An SPA application requires some route when this logic can run before the guards execute. This is not a server rendered application where the security runs in the trusted backend. The initializing logic setups the state and handles callbacks form the different authentication flows. Great care should be taken when using guards. If a guard is applied to the default route, you need to ensure that the initialization logic runs first. The checkAuthMultiple function should only be called once in the application.

import { Component, OnInit } from ‘@angular/core’;
import { OidcSecurityService } from ‘angular-auth-oidc-client’;

@Component({
selector: ‘app-root’,
templateUrl: ‘app.component.html’,
})
export class AppComponent implements OnInit {
constructor(public oidcSecurityService: OidcSecurityService) {}

ngOnInit() {
this.oidcSecurityService.checkAuthMultiple().subscribe(([{ isAuthenticated, userData, accessToken }]) => {
console.log(‘Authenticated’, isAuthenticated);
});
}
}

The sign-in logout, revoke tokens can then be implemented anywhere for the different identity providers. Each client configuration has its own configuration ID which can be used to run or start the required authentication flow, logout or whatever.

import { Component, OnInit } from ‘@angular/core’;
import {
AuthenticatedResult,
OidcClientNotification,
OidcSecurityService,
OpenIdConfiguration,
UserDataResult,
} from ‘angular-auth-oidc-client’;
import { Observable } from ‘rxjs’;

@Component({
selector: ‘app-home’,
templateUrl: ‘home.component.html’,
})
export class HomeComponent implements OnInit {
configurations: OpenIdConfiguration[];
userDataChanged$: Observable<OidcClientNotification<any>>;
userData$: Observable<UserDataResult>;
isAuthenticated$: Observable<AuthenticatedResult>;

constructor(public oidcSecurityService: OidcSecurityService) {}

ngOnInit() {
this.configurations = this.oidcSecurityService.getConfigurations();
this.userData$ = this.oidcSecurityService.userData$;
this.isAuthenticated$ = this.oidcSecurityService.isAuthenticated$;
}

forceRefreshSession() {
this.oidcSecurityService.forceRefreshSession().subscribe((result) => console.warn(result));
}

logout(configId: string) {
this.oidcSecurityService.logoff(configId);
}

refreshSessionId4(configId: string) {
this.oidcSecurityService.forceRefreshSession(null, configId).subscribe((result) => console.log(result));
}

refreshSessionAuth0(configId: string) {
this.oidcSecurityService
.forceRefreshSession({ scope: ‘openid profile offline_access auth0-user-api-spa’ }, configId)
.subscribe((result) => console.log(result));
}

logoffAndRevokeTokens(configId: string) {
this.oidcSecurityService.logoffAndRevokeTokens(configId).subscribe((result) => console.log(result));
}

revokeRefreshToken(configId: string) {
this.oidcSecurityService.revokeRefreshToken(null, configId).subscribe((result) => console.log(result));
}
}

The application can be run and you can logout or use the required configuration. Underneath the identity has not signed in with IdentityServer and the Auth0 client has be authenticated. Each identity provider is independent from the other.

The multiple identity provider support is implemented using redirects. You could also implement all of this using popups depending on you use cases.

Links:

https://github.com/damienbod/angular-auth-oidc-client

https://auth0.com/

https://github.com/IdentityServer/IdentityServer4

https://duendesoftware.com/

Update on .NET Multi-platform App UI (.NET MAUI)

Posted on October 5, 2021June 3, 2023 by 0

The .NET 6 project started in late 2020 as we were finishing .NET 5 where we started the journey to unify the .NET platform runtimes, libraries, and SDK. .NET 5 proved to be a very successful release, the first of the annual November releases, and due to the pandemic, the first all remote team release. Most importantly, it has been rapidly and broadly adopted. This November, .NET 6 will GA and will complete the unification of the mono runtime into core, have one set of base libraries for all workloads, and provide one SDK and project system with an expanded set of operating system and device targets. We will also release the next version of the C# language with C#10, have made several enhancements to the web stack ASP.NET, and improved the development experience with hot reload everywhere. We are also working on the next major release of Visual Studio 2022. There’s a whole lot more improvements coming with .NET 6 in November. Read the RC1 release posts for .NET 6 and ASP.NET Core in .NET 6.

.NET Multi-platform App UI (.NET MAUI) makes it possible to build native client apps for Windows, macOS, iOS, and Android with a single codebase and provides the native container and controls for Blazor hybrid scenarios. .NET MAUI is a wrapper framework and development experience in Visual Studio that abstracts native UI frameworks already available – WinUI for Windows, Mac Catalyst for macOS/iPadOS, iOS, and Android. Although it’s not another native UI framework, there is still a significant amount of work to provide optimal development and runtime experiences across these devices.

The .NET team has been working hard with the community in the open on its development and we are committed to its release. Unfortunately, .NET MAUI will not be ready for production with .NET 6 GA in November. We want to provide the best experience, performance, and quality on day 1 to our users and to do that, we need to slip the schedule. We are now targeting early Q2 of 2022 for .NET MAUI GA.

In the meantime, we will continue to enhance Xamarin and recommend it for building production mobile apps and continue releasing monthly previews of .NET MAUI. All the features we plan to deliver for .NET MAUI will be available in November when .NET 6 releases, but we will continue to work on quality and addressing customer feedback. We encourage you to give the previews a try. The .NET Upgrade Assistant will also support upgrading Xamarin projects to .NET MAUI.

.NET 6 RC1 is a “Go Live” release, meaning you can use it in production and you will be supported. This excludes .NET MAUI packages. The next release of .NET MAUI packages, when .NET 6 RC2 releases, will indicate “preview” in the version.

Thank you for all the feedback, contributions, and excitement that you have shared with us on this journey. Please keep it coming and we look forward to a high-quality release early next year. Now let’s look at some of the new features in this release.

.NET MAUI Preview 8 Highlights

The September preview of .NET MAUI completes some important Visual Studio integrations, namely installing .NET MAUI as a workload in the Visual Studio 2022 installer, and folding the Windows platform inside our single, multi-targeted project. With Visual Studio 2022 Preview 4 you can now use broader Hot Reload support with C# and XAML, and the new XAML Live Preview panel for a productive, focused development environment. Within the .NET MAUI SDK itself, preview 8 includes updates to the app startup pattern, the ability to extend a handler, and miscellaneous other new control capabilities as we close on feature completeness.

Visual Studio 2022 Preview 4 Productivity

When installing Visual Studio 2022 Preview 4, you can now check .NET MAUI (preview) within the Mobile Development with .NET workload. This will bring in .NET 6 as well as the optional workload dependencies: Android, iOS, and Mac Catalyst. When targeting desktop, you’ll also want to choose the Desktop Development with .NET, UWP, and Desktop Development with C++ workloads.

Once installed, the .NET MAUI templates and features of Visual Studio are all available. Live Preview will mirror your running application within the Visual Studio window in a panel you can dock anywhere that’s most convenient to you. The panel supports zooming in and out to focus on every detail of your UI, guides to align elements on both horizontal and vertical axis, and on some platforms you can hover and select UI elements to get sizing and distance information.

XAML Hot Reload now works well on Android, iOS (on Windows via Hot Restart or a remote build host), and Windows. And .NET Hot Restart is working together with XAML Hot Reload on Android, iOS, and Windows too.

When you create a new project, you’ll now see the Windows platform is alongside Android, iOS, and Mac Catalyst within the Platforms folder. To use Windows, you first need to install the Windows App SDK extension for Visual Studio 2022, and then uncomment the TargetFramework node at the top of your csproj file. In a future release, this will be available by default with the extension pre-installed with .NET MAUI.

.NET MAUI SDK Updates

The most notable update that you’ll need to migrate existing applications to is how we implement the .NET Host Builder pattern. We are now aligned with how ASP.NET and Blazor do this with a MauiProgram class that creates and returns a MauiApp. Each platform now calls that MauiProgram.CreateMauiApp. Compare an existing project with the new templates, or the pull request, to see these changes to Android/MainApplication.cs, iOS/AppDelegate.cs, and macCatalyst/AppDelegate.cs.

Sample MauiProgram:

public static class MauiProgram
{
public static MauiApp CreateMauiApp()
{
var builder = MauiApp.CreateBuilder();
builder
.UseMauiApp<App>()
.ConfigureFonts(fonts =>
{
fonts.AddFont(“OpenSans-Regular.ttf”, “OpenSansRegular”);
});

return builder.Build();
}
}

Sample of the Android MainApplication:

public class MainApplication : MauiApplication
{
public MainApplication(IntPtr handle, JniHandleOwnership ownership)
: base(handle, ownership)
{
}

protected override MauiApp CreateMauiApp() => MauiProgram.CreateMauiApp();
}

Android Updates

Android 12 (API 31) is now the default for .NET 6 applications building for Android. To use Android 12, you’ll need to install JDK 11 manually. Once we update the Android tooling in Visual Studio to use JDK 11, we’ll bundle this dependency by default with .NET MAUI. Until then, JDK 11 may have an unfavorable impact on the Android designer, SDK manager, and device manager.

Android projects now use the MaterialTheme by default. Make sure Platforms/Android/MainActivity.cs specifies @style/Maui.SplashTheme or you may get runtime errors on Android. Review the updated .NET MAUI template for example.

Other Changes

Other notable changes and additions include:

MinHeightRequest, MaxHeightRequest, MinWidthRequest, MaxWidthRequest have dropped the “Request” suffix and the layout system now treats them as true values
Simplified method for appending behavior to any control mapper – #1859

Various improvements to Shell theme styling
Added RefreshView for Android #2027 and iOS #2029

Added AbsoluteLayout #2136

Added Right-to-Left (RTL) FlowDirection #948

Added Button.Icon ImageSource #2079

Get Started Today

First thing’s first, remove all previous installations of .NET 6 and Visual Studio 2022 previews from your Windows control panel. Now install Visual Studio 2022 Preview 4 and check .NET MAUI (preview) under the Mobile Development with .NET workload, the Desktop Development with .NET workload, Desktop Development with C++ workload, and Universal Windows Platform.

Now, install the Windows App SDK Single-project MSIX extension. Before running the Windows target, remember to uncomment the framework in the csproj file.

Ready? Open Visual Studio 2022 and create a new project. Search for and select .NET MAUI.

For additional information about getting started with .NET MAUI, refer to our documentation.

Feedback Welcome

Visual Studio 2022 previews are rapidly enabling new features for .NET MAUI. As you encounter any issues with debugging, deploying, and editor related experiences, please use the Help > Send Feedback menu to report your experiences.

Please let us know about your experiences using .NET MAUI to create new applications by engaging with us on GitHub at dotnet/maui.

For a look at what is coming in future releases, visit our product roadmap, and for a status of feature completeness visit our status wiki.

The post Update on .NET Multi-platform App UI (.NET MAUI) appeared first on .NET Blog.

React Chat App: How to Make a Chat Using Socket.io

Posted on September 28, 2021June 3, 2023 by 0

Introduction

We hope that you will find this article really helpful. And not only because we intend to talk about the theoretical side of React chat apps, their importance and usage, but also because we are going to discuss the practical creation of such apps with the help of Flatlogic’s own Full Stack Web Application Generator – an amazing new tool, aimed at easing the tiresome process of creating apps from scratch.

What You Need to Know About React Chat Apps

Let’s start with a traditional question: “What is a React Chat App?”. And the answer to this question is quite simple: a React chat app is an application, whose primary purpose is to provide customers and/or clients with an opportunity to communicate with project representatives to help them solve any issues they might have with the project. Moreover, chat apps allow you to keep in touch with your clients in other ways, like providing them with your project’s news, updates, and any other information you deem significant. Another quite important feature of chat apps is the possibility of digitally storing your clients’ data such as names, addresses, messages, etc. They can also be used within your project as a tool to centralize all the internal team communications and data.

Why Your Project Needs React Chat App

Such applications are in high demand nowadays, as due to the overall number of businesses and projects present on the market, the client-business paradigm (or demand-supply paradigm in the broader sense) tends to side more with the client. This means that it is more important for a modern business to create a harmonious relationship with a customer than vice versa, because their wishes and needs could be satisfied by a company’s competitor more easily than the other way round if a client has any dissatisfactions with the current company. Thus, maintaining a strong relationship between you and your client is becoming more and more important, and this includes providing live support. Businesses and projects that are unique and have no competitors or alternatives might not have such a problem in the short run, although we should stress that the problem is not only in the short run. The reason for this is the simple fact that it is always a matter of time before a unique product acquires competitors and alternatives. That is why sustaining good relationships is essential. Luckily, this goal can be easily accomplished via chat apps.

So, now, having shown you the need for a chat app for your current and future projects let’s set out why we advise you to create it in React. And, the short answer would be that chat apps based on React.JS are fast, scalable and easy to maintain for developers. Don’t get us wrong, there are other programming languages that are also up to the job, but we suggest, nonetheless, using ReactJS, as there is no need to choose a longer and windier road. And that’s not mention the fact that you and your developers can simplify even that task and use Flatlogic’s Full Stack Web Application Generator. And that brings us to our next topic.

How to Create Your Own React Chat App

In this part of the article, we will discuss two ways of creating React Chat Apps:

Writing its code from scratch;

Using Flatlogic’s Full Stack Web Application Generator.

Let’s start by looking at the first method. There are two major steps you have to undertake in this case, each having a number of substeps::

Creating and Coding the Backend;

Creating and Coding the Front-end;

In creating a React Chat App by this method, you will also secure all of the information and data in your Chat App with E2E Encryption. But let’s get more specific and look more closely.

Step 1. Creating and Coding the Backend

For the first part of this step, which is actually creating the backend, we use such tools as the Express framework and Node.js. We use them with the purpose of providing real-time, two-way communication between the backend server and the frontend.

The second part of this step, which is coding the backend, is divided into several substeps, the first of which is creating a server directory and its browser. The code would look as follows:

· mkdir chatbackend

· cd chatbackend

After that, the creation of the package.json is needed. To do that, insert the following piece of code into the terminal:

· npm init –y

This way you get package.json.

Then you should create separately:

touch dummyuser.js

Add to the dummyuser.js file:

const cusers = [];

function joinUser(id, username, room) {

const puser = { id, username, room };

cusers.push(puser);

console.log(cusers, “users”);

return p_user;

}

console.log(“user out”, cusers);

function getCurrentUser(id) {

return cusers.find((puser) => puser.id === id);

}

const index = cusers.findIndex((puser) => puser.id === id);

if (index !== -1) {

return cusers.splice(index, 1)[0];

}

module.exports = {

joinUser,

getCurrentUser,

userDisconnect,

};

touch server.js

Add to the server.js file:

const express = require(“express”);
const app = express();
const socket = require(“socket.io”);
const color = require(“colors”);
const cors = require(“cors”);
const { getCurrentUser, userDisconnect, joinUser } = require(“./dummyuser”);

app.use(express());

const port = 8000;

app.use(cors());

var server = app.listen(
port,
console.log(
`Server is running on the port no: ${(port)} `
.green
)
);

const io = socket(server);

io.on(“connection”, (socket) => {
socket.on(“joinRoom”, ({ username, roomname }) => {
const puser = joinUser(socket.id, username, roomname);
console.log(socket.id, “=id”);
socket.join(puser.room);

socket.emit(“message”, {
userId: puser.id,
username: puser.username,
text: `Welcome ${puser.username}`,
});

socket.broadcast.to(puser.room).emit(“message”, {
userId: puser.id,
username: puser.username,
text: `${puser.username} has joined the chat`,
});
});

socket.on(“chat”, (text) => {
const puser = getCurrentUser(socket.id);

io.to(puser.room).emit(“message”, {
userId: puser.id,
username: puser.username,
text: text,
});
});

socket.on(“disconnect”, () => {
const puser = userDisconnect(socket.id);

if (puser) {
io.to(puser.room).emit(“message”, {
userId: puser.id,
username: puser.username,
text: `${puser.username} has left the room`,
});
}
});
});

Now, onto substep #2, which is all about creating dependencies and providing coding needed for the user’s ability to be added to an empty room by creating an array of empty users. It also empties the array when the user disconnects.

To create dependencies, do as follows:

npm i socket.io express cors colors

npm i -D nodemon

Create · node_modules

Now, we get to substep number three. Its main purpose is to create a server file, which is used for backend connection initialization and users-room communication provision. In order to complete this substep, do as follows:

Now, you need to set the following listeners:

· joinRoom. This one is needed to enable a new user to join the chatroom, as it provides a greeting message for the joining user as well as a notification about the user joining everybody else in the chatroom.

· chat. This one is crucial, as it handles the actual process of sending and receiving messages. It also sends an informational message about the user leaving the chat, if such a situation occurs.

That finalizes our active work on the backend side of the chat app.

Step 2. Creating and Coding the Front-end

For this step we will use React, Redux library, the socket.io-client, as well as a tool, known as aes256, which helps in the above-mentioned encryption, and, for that matter, decryption of information and data, contained within the chat.

Our first substep in this case is Creating the Front-end, which is all nice and simple. The final folder structure of the Front-end should look this way:

· chartfrontend
> node_modules
> public
· src
§ chat
§ chat.js
§ chat.scss
· home
§ home.js
§ home.scss
· process
§ process.js
§ process.scss
· store
· action
§ index.js
· reducer
§ index.js
§ process.js
o _global.scss
o aes.js
o app.js
o app.scss
o index.js
{} package-lock.json
{} package.json

Our second step is Coding the front-end. This part of the process has quite a number of steps, and, as the front-end side of the coding process is more creative-based than the backend one, we will only describe the general order of the substeps, without giving you the particular lines of code.

So, substep number one would be creating a client folder for our React App, as well as installing the dependencies necessary for the app to actually run.

The second substep would be to:

§ make modifications in your /src/index.js file in order to help the implementation of reducers in the react app;

§ after that, the creation of a file /store/action/index.js, which is needed for the definition of action objects that allow us to avoid writing the object every time we need it;

§ the next thing you would need to do is to create the /store/reducer/process.js, which would act as the reducer in the app, meaning that it would take the current state of the new action objects and return them to their new states;

§ then, get down to the creation of the /store/reducer/index.js file in order to import the newly created reducers and call the previously created action object;

§ and, finally, add redux to your React App and create the process action.

All of these actions are needed to ensure the sending and receiving of the incoming and outcoming messages through the aes.js file, and, correspondingly, the encryption and decryption of the messages.

After all the above-mentioned substeps are completed, we come to substep number three, which is responsible for the creation of route fetches for the user and room names. After that add styling of your liking for App.js.

The fourth substep constitutes coding the /home/home.js file, which acts as the homepage of the app, where the users write down their usernames and room names that they would like to join. It is absolutely necessary to code in the socket.emit(“joinRoom”) function for the joinRoom function to be defined in the backend, and, subsequently, give users an opportunity to be added to the room and be greeted by the welcome message, which we have mentioned earlier. After that, add stylings of your choosing to the home.js file.

The next substep, which would be the fifth one, is coding the /chat/chat.js file, which loads as the user joins the room. Basically, this is the main page of the chat, where users can chat with each other using the chatbox. After that, add stylings of your choosing to the chat.js file.

Substep number six is the creation of the aes.js file that is our encryption/decryption messages.

After that, we come to the seventh substep, which is creating the /process/process.js file, responsible for the display of the secret key, as well as encrypted and decrypted message on the right side of the chat room. Then, add the stylings of your choosing to this file.

Finally, run the server and the app you’ve got to test the final app.

And that’s how you create a React Chat App, which is also empowered by the E2E encryption. And while this is a pretty quick and easy process, there is a way to make it even more effortless using Web Application Generator. It is more than just a useful tool, but the apogee of more than 7 years of Flatlogic’s combined expertise and professional knowledge in one exceptionally made package. It allows you to create fully functioning and ready-to-use apps with just three simple actions:

Choose your chat app’s stack: React, Vue and Angular as front-end versions, as well as, Node.js as a backend option and PostgreSQL/MySQL as database options;
Defining a database scheme;
Choose the stylings and design for your chat app.

Then you just press the “Generate app” button and watch the magic happen by itself. So, even though the process of creating a React Chat App is quite simple even of itself, we highly recommend creating your next project’s chat app using Full Stack Web Application Generator to make a stunningly effective application in a jiffy.

Examples of Well-Made React Chat Apps

And in this part of the article, we would like to share with you 5 examples of React Chat Apps that we find quite well made and explain why we think so.

Example №1 – simple chat window thing built in React by Joshua P. Larson

We consider this React Chat App to be well-made as it shows that it is not always necessary to have lots and lots of flashy features to be considered a good, reliable addition to your project. Slow and steady or, more appropriately to the occasion at hand, nice and simple, wins the race.

Source – codespots.com/library/item/3749

Example №2 – Chat Application by DanLowo

This one is a beautifully made and stylings-heavy React App, somewhat reminiscent of a better-made Instagram Direct Messages. We include it into the list of our examples as a way to convey the importance of making your chat app visually appealing to the final user. It also should be mentioned that Flatlogic’s Full Stack Web Application Generator allows you to choose the design of the app you create from a list of eye-catching variants.

Source – github.com/DanLowo/Chat-Application

Example №3 – A React-based chat app using chatengine.io Rest API

This React Chat App is on the list for such features as group creation and Google Account sign-in. This particular app also serves quite a noble purpose – giving people a platform to share their worries and thoughts with anyone willing to listen on an anonymous basis. So, for having a pure goal and for killer features on our example list it goes!

Source – reactjsexample.com/a-react-based-chat-app-using-chatengine-io-rest-api-and-has-features-of-creating-groups/

Example №4 – EfeChat by Alper Efe Şahin

We felt the need to add this example to our list as a way of conveying the message of simplicity. Mainly, the simplicity of usage the end-user should have while using your React Chat App. And EfeChat covers this point easily, as its features are quite simple and intuitive – features the presence of which a user might not notice. But trust us, the lack of these two features would be most visible for the user.

Source -github.com/alper-efe-sahin/EfeChat-Reactjs

Example №5 – cute-chat by Asif Azad

And we would like to finish our list with cute-chat – a simplistic, yet stylish in its own right chat, that brings us back to 2000’s chats like ICQ with its overall design. But that is not the main idea behind putting it on this list. That would be the necessity of making your React Chat App smartphone-adapted, just like cute-chat, as most of today’s internet traffic is coming from smartphones, rather than computers.

Source – bestofreactjs.com/repo/BRAINIAC2677-cute-chat-react-react-apps

Conclusions

As our article comes to an end, we would like to reiterate a couple of important points:

If you want your business to have more opportunities to succeed, it is important to have well-developed communications with a client, as well as many ways of communicating with them. That is why the creation of your own chat app and its subsequent insertion into your project would rarely, if ever, by a step in the wrong direction;
Building your chat app on React is a fast, efficient and scalable way of creating chat apps coding language-wise. It is even more efficient and fast to use Full Stack Web Application Generator for that purpose.

And that is all for today. We hope that you will find this article most helpful and useful. So, have a good day and, as always, feel free to read more of our articles.

Create Your App Like Windows 11 in React

Posted on July 16, 2021June 3, 2023 by 0

Description:

If you are looking to create your app like windows 11 with same look and feel using React then you may try this UI component.

How can I use it?

You will need to download the component from GitHub using above ‘Download’ button and start using it.

Preview:

The post Create Your App Like Windows 11 in React appeared first on Lipku.com.

1) Make a little website of Things You Forget that allows you to one-click copy to clipboard.

2) Deploy it

3) Turn it into a Menu Bar App with Unite

4) Enjoy

What are CRUD and CRUD operations examples?

CRUD and REST

Parts of the CRUD app

Database

User Interface or Front-end

Back-end or APIs

Creating CRUD applications traditional way

Prerequisites

Front-end part

Back-end and database part

Hosting

Guides on how to create a CRUD application

Create CRUD app with Flatlogic

Goals

1. Planning the application

Users

Records

Projects

2. Register account in Flatlogic Generator

3. Choose the stack and project name of CRUD app

4. Choose the design

5. Define the database schema

Adding Records and Projects tables

Adding column

Task – this column will contain the names of the completed tasks

Hours – a column with the information on time spent on task

User – a column with data about the user who created the job record. Please note that the type here is relation_one and a link to the users table

Submitted – this column will contain information about the status of the job

Project – a column with information about the project to which the task belongs. The column will also be linked to the projects table

Name – in this column, we will store the name of the project. The column must be created with the following parameters

Rate – a column with information about the hourly rate at which the project is being executed

Start_date – the column with information is the start date of the project

End_date – a column with the date of the end of the project

6. Create CRUD app

7. Working with CRUD project/application

Overview of project

Download the code to customize

See the live demo

See generated API

Push code to the Github repository

See the code preview

Edit the schema of the CRUD application

CRUD application settings

Recap

Conclusion

Setting Up

How to generate a project with web app generator?

Check our recent blog posts to know more on the web app generator

The itch

Introducing the config file

Introducing the after file

.NET MAUI Preview 8 Highlights

Visual Studio 2022 Preview 4 Productivity

.NET MAUI SDK Updates

Android Updates

Other Changes

Get Started Today

Feedback Welcome

Table of contents:

Introduction

What You Need to Know About React Chat Apps

Why Your Project Needs React Chat App

How to Create Your Own React Chat App

Examples of Well-Made React Chat Apps

Conclusions

Suggested articles

Description:

How can I use it?

Preview: