Prototyping with Angular

 

 
There are many prototyping tools in the marketplace today, and Angular isn’t one that usually comes to mind. We chose Angular for a few reasons:

1. Reusable code
   Greentea CRM was built with Angular as its underlying framework. Using Angular to prototype meant our engineers could reuse code in the production app.
2. Mature component library
   With Angular Material, We were able to use pre-built UI components like this autocomplete  form control without having to write one from scratch.
3. Supportive community
   We’ve learned a lot from the Angular community by attending local meetups and reading blog posts from developer experts.

Faking search with real data

A Search prototype that didn’t serve up real results wouldn’t be very convincing to the user. However, we didn’t have time to write a functional search API or connect to one either. Instead, we went with a useful trick learned.

Use Google Sheets as a backend database

We created a spreadsheet and filled it with rows of search results. A benefit of using Sheets was that it provided a user-friendly interface for populating data. Then, with some custom Apps Script, We pushed all edits to a Firebase Realtime Database (step-by-step guide here). Finally, we wired up the Material autocomplete component to read from the database with AngularFire.

pic courtesy: blog.angular.io

A hosted prototype for user testing

We used Firebase Hosting to deploy the prototype to a publicly accessible URL. Once uploaded, we used that link to run remote user testing sessions over a video conference call. One of the benefits of a hosted prototype is that you can let your users interact with the prototype on their own while you observe their screen.

pic courtesy: blog.angular.io

Measuring engagement

With Google Analytics, We were able to add custom events tracking to see how users were interacting with prototype. This allowed us to see what users were searching for in real time. With this data, we were able to iterate Our category structure and test whether that had an impact on our click-through rates.

pic courtesy: blog.angular.io

Hire Angular Developer from us, as we give you high quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft“.

To develop the custom web app using Angular, please visit our technology page.

Content Source:

1. blog.angular.io