// archives

HTML5/CSS

This category contains 4 posts

Part 5: Web application development using AngularJS, Spring Boot and Maven – Support for eBird APIs, HTML 5 Geolocation and Google Geocoding

In my previous post, I completed the first phase of my Bird Log application. I can use this application to view my current sightings and add new sightings. I also implemented very basic support for content filtering. In this post, I am going to use eBird APIs to display current bird sightings reported on ebird.org, near my current location. I plan to use HTML5 Geolocation APIs to find out my current location automatically and then use Google Geocoding APIs to map my current Geographic coordinates (latitude and longitude) to a human-readable address. (more…)

Part 4 : Web application development using AngularJS, Spring Boot and Maven – BirdLog Application

In my previous posts (Part 1, Part 2 and Part 3), I developed a starter web application using AngularJS, Bootstrap, Spring Boot and Maven. In this post, I am going use this starter app to build the Bird Log app.

What is Bird Log?

The Bird Log is a simple web-based, Single Page Application (SPA), used to record my bird sightings.
This application:

  • Displays my recorded sightings in a tabular format
  • Supports sorting and filtering
  • Provides a way to log new sightings
  • Uses eBird APIs to find the latest bird sightings near my current location reported on eBird
  • Implements HTML5 Geocoding APIs to find my current location
  • Implements Google Geocoding APIs to map latitude/longitude to the location/address
  • Uses RESTful web services to interact with the server that handles the data (To keep it simple, data is stored in the memory for now)

(more…)

Part 3 : Web application development using AngularJS, Spring Boot and Maven – Beautify using Bootstrap

In the previous post, I added AngularJS support to my base Spring Boot Application. In this post, I am going to integrate Bootstrap CSS and Javascript framework to make it pretty.

Configuring Bootstrap

  • Make sure that Bootstrap CSS and Javascript files are included in the application.
    Note: Bootstrap package was already downloaded using Bower. See the previous post for more details.

    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" >
    

    and

    <script src="bower_components/jquery/dist/jquery.js"></script >
    <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script >
    

    (more…)

Part 2 : Web application development using AngularJS, Spring Boot and Maven – Adding AngularJS support

In my previous post, I created a project for a simple web application using Spring Boot and Maven. I want to take it further and add AngularJS support to the setup.

I am an avid birder so I am going to develop a Bird Log app to log my bird sightings. Recently, I was introduced to AngularJS and have become a big fan of this framework. I am going to develop a Single Page Application (SPA) using AngularJS and Twitter Bootstrap Framework for HTML and CSS.

(more…)

Categories