Photo by Maxwell Nelson on Unsplash
Introduction
There are various Web3 development solutions with unique advantages and limitations. If you are a frontend JavaScript developer seeking to build on the decentralized web, you may find it challenging to navigate. Fortunately, Juno provides a unique approach that combines Web3 power with the ease and familiarity of Web2 development.
After exploring how to combine React and Juno to develop a dApp in a previous blog post, we are now going to take a look at how to develop an Angular app on blockchain.
So, let’s dive in and discover how you can build powerful and user-friendly decentralized applications with Angular!
How Juno Works
If you’re not familiar with Juno, it’s an open-source Blockchain-as-a-Service platform that enables you to build decentralized applications with ease. Think of it as a serverless platform, like Google Firebase or AWS Amplify, but with the added benefits of blockchain technology. With Juno, everything runs on the blockchain, providing a fully decentralized and secure infrastructure for your applications.
Juno leverages the Internet Computer blockchain network and infrastructure to launch a “Satellite” for each app you build, essentially a powerful smart contract that contains your entire app. From the assets provided on the web, such as JavaScript, HTML, and image files, to its state saved in a super simple database, file storage, and authentication, each Satellite is controlled solely by you and contains everything it needs to run smoothly.
Build Your First Dapp
Let’s start building our first decentralized application, or “dapp” for short. In this example, we’ll be creating a note-taking app that enables users to store and retrieve data entries, as well as upload files.
Initialization
Before you can integrate Juno into your Angular app, you’ll need to create a satellite. This process is explained in detail in the documentation.
Moreover, you also need to install the SDK.
npm i @junobuild/core
After completing both of these steps, you can initialize Juno with your satellite ID in the main component of your Angular app. This will configure the library to communicate with your smart contract.
import { Component, OnInit } from "@angular/core";
import { initJuno } from "@junobuild/core";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.scss"]
})
export class AppComponent implements OnInit {
async ngOnInit() {
await initJuno({
satelliteId: "pycrs-xiaaa-aaaal-ab6la-cai"
});
}
}
That’s it for the configuration! Your app is now ready for Web3! 😎
Authentication
To enable secure and anonymous user identification, users will need to sign in and sign out. You can bind the corresponding functions to call-to-action buttons anywhere in your app.
import { Component } from "@angular/core";
import { signIn, signOut } from "@junobuild/core";
@Component({
selector: "app-demo",
template: `<button (click)="signIn()">Sign-in</button>
<button (click)="signOut()">Sign-out</button>`,
standalone: true
})
export class DemoComponent {
readonly signOut = signOut;
readonly signIn = signIn;
}
To integrate tightly with other services, the library and satellite automatically create a new entry in your smart contract when a user successfully signs in. This enables the library to check permissions on any exchange of data.
To observe this entry and, consequently, understand the user’s state, Juno offers an observable function called authSubscribe()
. You can use this function as many times as needed, but it’s convenient to create a service that provides the information. This way, you can derive RxJS Observable
to propagate the user.
import { Injectable } from "@angular/core";
import { authSubscribe, User } from "@junobuild/core";
import { map, Observable } from "rxjs";
@Injectable({
providedIn: "root"
})
export class AuthService {
readonly user$: Observable<User | null> = new Observable((observer) =>
authSubscribe((user) => observer.next(user))
);
readonly signedIn$: Observable<boolean> = this.user$.pipe(
map((user) => user !== null)
);
}
Juno’s library is designed to be framework-agnostic and currently doesn’t include any framework-specific code. However, we encourage contributions from the community, and if you’re interested in providing Angular bindings, we welcome your contributions to the project! 💪