Progressive Web Apps With Angular: Part 1

Overview

Progressive Web Applications will be the game changer for Mobile application, many big companies like Flipkart, Twitter, Trivago, AliExpress are already using PWA features.

Progressive_Web_Apps_image1

Here we are going to build Contact book using Angular 7. The application shows the list of contacts which is added by the user. The user can also edit the contact and some native feature like the splash screen, offline support and sharing data on any social media.

Getting Started

Let’s start a New Project named Contact Book. (My current Angular CLI version is 7.0.2, Node version is 10.8.0, NPM version is 6.2.0)

The command will open a new tab in the default browser. The command will serve the project on http://localhost:4200/ with some default content.

Adding Angular Material

For designing purpose, Here we are using an Angular material framework.

Also, need to import in styles.css

Now we add some material design modules to our application like hammerjs and BrowserAnimationsModule . For the use of any component from the material design we need to import that. Here first we import Toolbar component in app.module.ts file. Don’t forget to add in imports.

Now we can use the toolbar in any component of this application. Here we use the toolbar in app.component.html file.

Create RESTful API

We need to create RESTful API for our project. Here we create simple API with NodeJs. For API, we create a new folder named as server in the current directory and then add a package.json file via npm init. Now the next step is to install dependencies that we are going to use. Install express-nedb-rest (npm install express-nedb-rest –save) that is an open source API using express & nedb that create restful API automatically. Then we install cors ( npm install cors –save) that are a technique which will serve API to sub party domain.

Now we create a new file called index.js for our server. This server we will be able to get an element from the database, to put the element to the database, to update and delete the element from the database.

index.js.

Now it’s time to run our server with node index. We can see the result something like below in the browser on http://localhost:3000/. Now our server is ready to use.

[{“name”:”contacts”,”link”:”http://localhost:3000/contacts”}]

Time to Put some logic

Let’s take contact dynamically from the server. For that purpose, we need to add
contact.ts.

Now we need to generate service via ng generate service data. Update providers in app.module.ts file. Data service is used to get data from the database, update data into the database. For that first, we need to import httpmodule in the app.module.ts file. Then request to the server with GET request to get data from the database. Save or update data into the database. Here endpoint URL is server URL which will be changed according to the server.

Data.service.ts.

Adding Components & Routing

We need to add components to separate contact detail form and display contact list which is added by the user and put routing for navigating from one page to another page. Now let’s generate component.

As a result, angular generate two separate folders with necessary files and also update in the app.module.ts file.

In list.component.html file, we need to import angular material components to app.module.ts file. Add the following code

In list.component.ts file add function to bind data dynamically and add routes. For sharing purpose here we are using WhatsApp URL. You can find URL from https://faq.whatsapp.com/en/iphone/23559013

Now, we will create forms in contact.component.html file. Here we are using ngModule for binding data to the input.

In contact.component.ts file we put logic to bind data with input and get the data according to the id for editing purpose.

Check Audit

We need to check out how our application is going and where we need to change for PWA feature. All we need to do is open our Chrome DevTools and go to the Audits tab, where we can find such a powerful tool as Lighthouse — the best diagnostics of web pages. Now press Perform an Audit. it will take some time, then it will get some result. The result is not so good for now. We need to increase PWA score for the better result.

Progressive_Web_Apps_image3

Conclusion

Now Run Angular Project http://localhost:4200/ and Node server http://localhost:3000/ together in the terminal. This is how you can create & run angular 7 application with node integration. In PART 2, we are going to add PWA features & increase PWA score to our application.

Progressive_Web_Apps_image2

mm

Pooja Ghetia Angular Developer

I am Angular Developer who works at Yudiz Solutions Pvt. Ltd. - a leading Web, Mobile Apps and Game Development company. I like writing blogs to share my knowledge and ideas with others. I'm always interested in learning about the latest technology.

Comments are closed.

Top