16 Jun 2017

Using PhoneGap Plugins to Create a Splash Screen Part Two: Using PhoneGap Plugins

PhoneGap Plugins Logo
Part one of this blog series, Using PhoneGap Plugins to Create a Splash Screen Part One: Creating a Splash Screen discusses how to design splash screens for mobile applications. In this part of the series you will learn how to use PhoneGap plugins to apply the screen you created. PhoneGap provides a series of core plugins that help developers take advantage of a mobile device’s native features such as the camera or ability to vibrate. There are three places you can look for pre built plugins. You can search npm, git repositories or PhoneGap’s plugin repository. In this post you will be using a plugin from PhoneGap’s base repository, the splash screen plugin.

Plugins need to be implemented differently for each platform so you need to be sure to read into how to how apply the one you have selected correctly for the device you are working on. In this example you will be installing the splash screen plugin on an android device.

Step 1) Importing your Plugin

You will import the plugin that you have chosen into your config.xml file. You need to include the plugin name, spec, and source. The spec is your plugin version, your plugin will work without this, but it is highly recommended that you include the version. The source for plugins from the PhoneGap core where the splash screen is located will be “pgb”. The import script for the splash screen will look like this once all of the parameters are added:

<plugin name="cordova-plugin-splashscreen" spec="~4.0.2" source=”pgb” />

Some plugins require you to add in a reference to the javascript files. This is not the case with most PhoneGap core plugins like the splash screen plugin. If you are required to reference the files you will not be adding them into your project when you upload it on PhoneGap Build. The files will be automatically injected by PhoneGap and adding them in advance will cause problems with your build. Read the documentation for your plugin if you are using a different plugin, as mentioned before each one is different.

Step 2) Adding Your Platforms

Once you have loaded in your splash screen plugin you will need to specify the platforms you are targeting. In this example you are using Android. To do this you will add the following code to your config.xml file.

 <platform name="android"></platform>

If you would like to add in other platforms the format is the same. There is no limit on the number of platforms you can use.

Step 3) Add Your Screens

The step is to add in your splash screen files. If you read part one of this post you will be using the png files you created. Nest them into your platform tags. You will have one default screen and a landscape and portrait screen for each pixel density.

    <platform name="android">
        <splash src="splash.png" />
        <splash src="res/screen/android/splash-port-ldpi.png" platform="android" density="port-ldpi" />
        <splash src="res/screen/android/splash-port-mdpi.png" platform="android" density="port-mdpi" />
        <splash src="res/screen/android/splash-port-hdpi.png" platform="android" density="port-hdpi" />
        <splash src="res/screen/android/splash-port-xhdpi.png" platform="android" density="port-xhdpi" />

        <splash src="res/screen/android/splash-land-ldpi.png" platform="android" density="land-ldpi" />
        <splash src="res/screen/android/splash-land-mdpi.png" platform="android" density="land-mdpi" />
        <splash src="res/screen/android/splash-land-hdpi.png" platform="android" density="land-hdpi"  />
        <splash src="res/screen/android/splash-land-xhdpi.png" platform="android" density="land-xhdpi"  />
    </platform>
Step 4) Customize Your Splash Screen with Preferences

Now it is time to customize your splash screen. The splash screen plugin gives you a few different preferences to work with. The following are a few examples that you can use.

SplashScreenDelay
The SplashScreenDelay lets you add a delay to the amount of time before the splash screen is hidden. This is set in milliseconds. It is useful when you want to expose users to your branding but your application has little or no loading time. This can also be set to 0 to force your screen to automatically hide.

 <preference name="SplashScreenDelay" value="3000" />

FadeSplashScreen and FadeSplashScreenDuration
FadeSplashScreen can be set to true to give your screen a fading effect as it transitions to the application. You can set how long this transition takes with fadeSplashScreenDuration, also set in milliseconds.

   <preference name="FadeSplashScreen" value="true"/>
   <preference name="FadeSplashScreenDuration" value="750"/>

ShowSplashScreenSpinner and SplashScreenSpinnerColor
Lastly you should add your spinner. You learned about the parts of a splash screen in the first part of this series. Now is when we add in our spinner. This is set with ShowSplashScreenSpinner. You can also change the color of your spinner to go along with your application by using SplashScreenSpinnerColor.

   <preference name="ShowSplashScreenSpinner" value="true"/>
   <preference name="SplashScreenSpinnerColor" value="#ffffff"/>

Step 5) Add the Splash Screen to your PhoneGap Project

Log into your PhoneGap Build account. Find the application project you were working on in the last post. Click on the Update code button and reload your project. Once you have done this click on Rebuild all. Download the new version of the project to your android device. Open up the application on your phone. You will notice you are now being greeted by your new splash screen!

Feel free to download the example Android APK installer here: http://office.realeyes.com/reblog-downloads/reRealEstate-splashScreen.apk

Share this
06 Jun 2017

Virtual and Augmented Reality in 2017: A Quick Look

Project Tango Logo

Digital media and applications are escaping their confines of 2d platforms with augmented and virtual reality. You may have been hearing a lot about virtual reality and augmented reality lately with Google Daydream Logotechnology like Microsoft’s HoloLens, Facebook’s Oculus Rift and augmented reality phone games like Ingress and Pokemon Go becoming more popular. Over the last year we have also seen an explosion in the amount of AR and VR ready phones to go to market. Last November the first augmented reality enabled phone was released, using technology from Google’s augmented reality program, Project Tango. Even more phones already come ready to be used with Google’s VR tech, Daydream.

What does this mean for the future of phone applications and the way we view media? In this post we will discuss what the difference between augmented and virtual reality is, how they work, where they are being used now and where can expect to see more.

 

Augmented Reality versus Virtual Reality

The first thing we need to understand is the difference between augmented reality and virtual reality. Augmented reality and virtual reality are commonly confused for one another, so let’s start by setting the record straight. While they are very similar there are a few key differences.

Augmented reality uses the real world as the environment for the user’s experience. Augmented reality uses virtual objects simulated in an already existing space. An example of how augmented reality would work is the following. You are in your living room and you would like to see what a new blue chair would look like next to your couch.  You download a furniture app that utilizes AR technology, you turn on the application’s camera and it shows you your living room with the new chair in the middle of it. Augmented reality enhances the world we live in through the phone’s camera, but it is still easy to tell what is real and what is being simulated.

Let’s look at how virtual reality is different. Virtual reality involves more equipment, usually in the form of a headset attached to a personal computer or mobile phone. Virtual reality takes the user and makes them feel as though they are in a different environment by generating graphics and sound. An example of how this would work is the following. You get your virtual reality headset out, put it on and now you are in a furniture store full of chairs to choose from. A virtual salesperson walks you through a selection and you pick the right one for your living room. You can not tell the difference between reality and the simulated furniture store while the virtual reality program is running.

 

A Look at How Augmented Reality Technologies are Being Used Today

Project Tango Development KitRecently Tango augmented reality technology has become accessible to developers. This technology uses the three core technologies of area learning, motion tracking and depth perception to understand its surroundings. Tango offers a Unity plugin and development device that makes building augmented reality easier for developers so we can expect to see more games and applications using that technology soon.

Last year the Lenovo Phab 2 Pro was released, the first phone to come with Tango technology. Unfortunately this release was not as successful as anticipated. Of the few apps available many of them were reported to be buggy. The Lenovo hardware fell short as well with many reviews complaining about the heavy hardware, low graphics quality and AR apps draining the battery in short amounts of time. Overall the release was just a good proof of concept for Augmented reality on mobile devices, but could use some major improvements.

A Look at How Virtual Reality Technologies are Being Used Today

Virtual reality has seemed to have currently found its home in the gaming industry. HTC Vive HeadsetSome of the most popular applications for VR has been through the HTC Vive, Daydream View, Oculus Rift, and the very popular Sony Playstation VR. These technologies are being used to develop and play games using platforms like the Oculus Rift store and Steam VR. Google is also  investing in virtual reality development through Daydream and the Daydream View headset. A few phones are already on the market that come Daydream ready and we can expect to see more.

 

Media Streaming with VR

While gaming seems to currently dominate the present state of the Virtual Reality market there are other applications being used for the technology. Applications like Within and Ryot VR are using the technology to engage viewers in news videos and documentaries shot with 3d cameras. This has been mostly used to shoot short artistic or documentary style pieces focusing on social topics. More popular media outlets like the New York Times are also getting involved with VR technology with the NYT VR app that allows users to go through an expanding catalog of news stories.

One of the factors that is helping to expand the market for VR media streaming is the availability of 3d cameras. Consumer ready 3d cameras are hitting the markets and making it easier for people to create their own VR content. Here’s some links to entry-level 3d cameras:

Also, for those that want to stream 360 video, there’s a number of players in the 360 streaming media space:

Conclusion

We can expect to see more AR and VR in the near future as more hardware becomes available like headsets and AR and VR enabled phones. We’ll reach critical mass once the number of applications and sources of AR and VR media grows as well. We think we can continue to expect to see much more from these technologies in the near future.

Share this
20 Apr 2017

Using Phonegap Plugins to Create a Splash Screen: Part One

A splash screen is a graphical element that appears when an app launches or is loading. The basic splash screen usually contains a logo, the application or brand name and a loading bar. Splash screens are more of a necessity for larger applications that take time to load. Having a user look at a blank screen while waiting for the app to load increases their perceived wait time. If you have a smaller application with less loading time, splash screens are a good opportunity to expose users to your logo and improve brand recognition .

 

The following is part one of a two part series on creating a splash screen for your mobile application. In this section you will learn about the elements included in a splash screen, how to design a splash screen, and the design files you will need to implement your design on an active mobile application.

 

If you have been following the RealEyes blog series on building mobile applications using Google Material and Cordova PhoneGap this post will continue to add to the real estate rating application you have been building. If you have not been following along, and would like to learn to build a mobile application using Cordova PhoneGap and Google Material the following are links to the previous posts:

If you have not been following the RealEyes blog series on building mobile applications using Google Material and Cordova PhoneGap this is still a great reference for improving your mobile application with a well designed splash screen.

 

Step 1) Knowing the Design Elements

The splash screen has two main objectives. The first objective of the splash screen is to let the user know that the application they are trying to launch is loading. The second objective is to give the user extra exposure to your brand. You are going to accomplish these goals with the two key elements of the splash screen, the loading bar and the brand logo. Google also suggests that you expose placeholder UI. Placeholder UI  includes core structural elements such as a status bar to give a smooth transition into the application. Extra elements that can be added into the splash screen is the brand or application name, brand slogan, the application version number and any other graphical elements that increase brand recognition. When choosing what to add to your splash screen remember to keep it simple, less is better.

Design Elements :

(Suggested)

  • Logo
  • Loading bar
  • Placeholder UI

(Optional)

  • Application name
  • Slogan
  • Version number

 

Below are some examples of splash screens:

 

 

Step 2) The Design Specs

When designing splash screens you need to account for different screen sizes as well as different orientations. Therefore every screen size qualifier should have two different images, one for landscape and a second for portrait. In the demo you are looking to create an app for an Android device. If you are building for other devices you can find the design specs here. All files should be in a png format.

 

 

Name DPI Portrait Landscape
XHDPI 320dpi 720px X 1280px 1280px X 720px
HDPI 240dpi 480px X 800px 800px X 480px
MDPI 160dpi 320px X 480px 480px X 320px
LDPI 120dpi 200px X 320px 320px X 200px

 

Step 3) Designing your Splash Screen

Now it is time to put it all together! You are going to build a simple splash screen for the real estate application you have been building over the last few posts. You will use the application logo (the design you are using for your icon), the app name (Real Estate Rater), and the color scheme from the app with a light texture. The placeholder UI and the load bar will be added and configured when the design is implemented in PhoneGap with your plugin. When you create your design you need to remember to use a vector image so you can easily recreate the image in multiple size files.

You now have a set of splash screens that are ready to be added to any android application! If you would like to learn how to implement your new design in a PhoneGap project using the splash screen plugin, look out for our next blog post: Using PhoneGap to Create Splash Screens: Part Two

Share this
11 Apr 2017

Creating a Product Icon for Your App with Material Design and PhoneGap

You and your team may have spent months developing a great application. Now it’s time to put it on the market for users to discover. In a large sea of apps you need to make a great first impression to stand out from the crowd. A well designed product icon will help you accomplish this. The product icon is the first and sometimes only part of your app a potential user will see. The icon you design needs to represent your app in a clean, eye catching fashion. It needs to give potential users an idea of what your app does while gaining their trust with a quality design.

In this post we will be showing you some guidelines to follow in order to create a well designed product icon. We will be using Google Material design standards along with PhoneGap to complete our project. If you have been following our blog we will be using the real estate reviewing app that we have been building over the last few posts Creating Cross Platform Mobile Applications with Cordova/PhoneGap and A Comparison of Material Design Frameworks. If you have not been following our blog you can still use this as a guide for creating an icon for your own project. Let’s get started!

 

Step 1) The Concept

First thing you need is a good concept. Your concept should represent your app simply. It should give the user an idea of what it does before they ever click on it.

This app is about rating and reviewing real estate so putting the shape of a house in the icon will associate the app with real estate. Adding a star will give some indication of the purpose of the app since users have become accustomed to the star rating system. These two shapes will give users a sense of what the app is about without ever opening it.

Step 2) The Design Specs

One you’ve established an exciting concept you may want to jump into creating it. First, however, you should look up the specs for the icon. You’ll need to create the same icon a few different times in multiple sizes in order to account for different screen pixel densities. This means your icon needs to be scalable and for that reason, using a vector graphic is highly recommended. The following is a chart of the naming conventions, dpi, and sizes for the Android icons that you would need to create.

xxxhdpi 640dpi 192px X 192px
xxhdpi 480dpi 144px X 144px
xhdpi 320dpi 96px X 96px
hdpi 240dpi 72px X 72px
mdpi 160dpi 48px X 48px

 

Step 3 ) Designing the Icon

Now that you know the sizes and naming conventions required, it’s time to start designing. For this, you can use Google Material’s guidelines to create the icon. These design guidelines are already implemented through the app via the Materialize framework. It is good practice to sync the design of the icon with the design of the app. After all, the icon is supposed to be a preview of the rest of the application.

 

As discussed in our post Initial Thoughts on Google Material Design Material design is based around the concept of digital design inspired by the physical world. The same concept is applied in product icon design. Product icons like most good design is based on a grid system that you can see below. Along with this grid system, a keyline grid to guide for pre-rendered base shapes is provided. You can use these guides when designing the icon.

The Grid and Keylines

Google Material Design - Grid and Keylines

 

Get Your Base Down

To start, add the base lines to the grid to form the outline of the icon design. Once you have a blueprint of what is being designed, start putting the pieces into place. First, fill in the background. In this example the main color in the application, teal, is being used. Remember to keep your color scheme consistent to what you are using in your app. The background will have two additional parts. The top of the icon will have what is called a ‘tinted edge’ this is the original color mixed with white. The bottom will have what is called a ‘shaded edge’. This is the background mixed with a darker color to give the appearance of depth to the icon. After the background is in place, color in the foreground.

This is the house shape using white for the foreground.
Icon step 1 - Teal Background and White House

Add Some Color
Next, add some spot color to the icon. This is a highlight on your icon using a small amount of a secondary color. We are going to use yellow on the star as the spot color.

Icon Step 2 - Spot Color - Yellow Star

Give the Icon Depth
Lastly, give the icon elements depth by adding shadows. Imagine a light source coming from the top left corner of the icon at a 45 degree angle. Add a soft shadow from the foreground onto the background to separate them.

Here is the final result.

Icon Step 3 - Adding Depth

Experiment
You can also try experimenting with different background shapes using the same guidelines. Have fun!

Icon Design Experimentation - Round Background

 

Step 4) Create and Name Your Icon Files

Use the chart in step 2 to create your icon files. Use the name in column 1 the dpi in column 2 and the width X height in column 3. Save your files as pngs. Once you have all of your files created, add them to the config.xml file in your PhoneGap app.

 

Step 5) Add the Icon to Your PhoneGap Project

Log into your PhoneGap Build account. Find the application project you were working on in the last post. Click on the Update code button and reload your project.

PhoneGap Build - Update Code

Once you have done this click on Rebuild all. You will see your icon replace the default PhoneGap icon in your project space. You now have a brand new product icon to represent your app! Feel free to download the example Android APK installer here: http://office.realeyes.com/reblog-downloads/reRealEstate.apk

Share this
05 Apr 2017

Creating Cross-platform Mobile Applications with Cordova / PhoneGap

PhoneGap Logo

In 1994 IBM released Simon, Simon is widely considered to be the first “smartphone” it was the first mobile device to use a touch screen and run apps. In the 90s and 2000s the mobile market has exploded with applications and devices, for developers this means needing to be able to develop apps for not only different size screens a but also for different platforms. Ideally it would be nice to find a cross-platform solution to write once and deploy “everywhere”. To account for different screen sizes we work with responsive design, where content moves fluidly to adapt to the size of the browser it is being viewed in.

 

Using responsive design works great for web applications, but what if we want to take our web application and  have it become a mobile application?  That is not as simple, to get our app to work on an Android device we need to rebuild it with the Android SDK, and then we need to build it again in Swift/Objective-C for IOS. Lucky for us there is an easy way to get the same responsive web app we built earlier to run as a mobile app on Android and IOS without having to rebuild it. Apache Cordova has created a technology that takes our HTML, CSS and JavaScript and transforms it into a mobile application that can be used across an array of different platforms.

 

In an earlier blog post we created a real estate rating application using different Google Material based design frameworks. Currently these applications are web apps and can be run off of your smartphone, but only through opening up your mobile browser and navigating to the page where the app is being hosted.

 

In this post, we will show you how to use Adobe’s PhoneGap – an open source distribution of Cordova – to simulate and build mobile apps using just HTML, CSS and JavaScript.

 

What you need to get started

  • A computer (We are using windows)
  • A mobile device  (We are using android)

 

Part 1 – Simulating and testing the application with Cordova PhoneGap

 

Step 1 ) Find a web application project to work with

First you will need to have a project to start with. You can either use one of your own web applications or you can clone the app we will be working with. We are going to be using our real estate app from an older blog post about using different UI frameworks. You can clone the project here.

Step 2) Install the PhoneGap Desktop Application

Now that we have our project we need to install the PhoneGap application on our computer. Click this link to download the desktop application.

Step 2) Install PhoneGap on your mobile device

On your mobile device you will need to install the free PhoneGap developer app. It is available on iTunes, Google Play and the Windows Phone Store.

 

Step 3 ) Create your app template and connect your devices

The next step is to create our app template. To do this open your PhoneGap desktopPhoneGap Mobile App Template app and click the add button on the menu. Select ‘Create new project’. Then select the blank project. There are also some other templates available for you to play with later on. Next, choose a folder on your file system in which to place the app. Give the app a name and ID click to create the project.

Now that you have your app template created open your mobile PhoneGap developer application. Replace the server address with the one highlighted in your PhoneGap desktop app and try to connect.

PhoneGap Mobile App Template - Server Address

If you can not connect try these steps to debug:

  • Check that you have the latest versions of the mobile PhoneGap developer app and PhoneGap desktop app (if you just downloaded them you should)
  • Make sure you do not have any firewalls blocking your connections
  • Check that your computer and phone are on the same wifi network

 

Step 4) Replace the template application code with your code

Go into the /www folder in your new template application. This is will be the root of your application code. You will notice that there is already an index file referencing the Cordova framework through a <script> tag:

<script type="text/javascript" src="cordova.js"></script>

You will want to copy your application files to the /www folder, open up your index.html, and add the Cordova <script> tag to your application. At this point you can save your index.html and you’ll be ready to test how well your app runs on a device.

Here’s a screenshot of what the demo-app-house-materialize project looks like with the Cordova script reference.

Adding Cordova Framework to Your Code

 

Step 5) View your app on different mobile devices

Select the play button to start the server for your application in the PhoneGap desktop app. You will now be able to connect to it via the PhoneGap developer app on your mobile device. When you click to connect in the PhoneGap developer app on your phone PhoneGap will wrap your HTML/JS/CSS application into a mobile friendly package. Then your application will be launched on your Android or iOS mobile device.

Step 6 ) Enhance, review, repeat

You can now enhance your app so that the mobile app looks as good as the web app looked. One example would be to modify the CSS file to make the container of the app 100% instead of a fixed pixel width.

 

Part 2 – Packaging our project as a mobile app

Step 1 ) Get started with PhoneGap Build

Go to:  PhoneGap BuildPhoneGap Build Logo

Click ‘get started’
Pick your plan (we are using the free plan)
Create an account and log in

 

Step 2) Uploading your project

Before you upload your app you will need to prep it. Whether the app is in a git repo or is uploaded as a zip file it will need an application descriptor config.xml file. We will go the zip file route:

  1. First, copy the config.xml from the PhoneGap project root to the /www folder that represents your “app”.
  2. Make sure all of the libraries, fonts, icons and frameworks you are using are also properly referenced and exist somewhere under your /www folder.
  3. Zip up the /www folder.

Now, to upload your app:

  1. Log into PhoneGap Build
  2. Click the ‘+ new app’ button
  3. Click the ‘Upload a .zip file’ button and select the zip file you created.

Once the zipfile is uploaded you will see a screen similar to the following screenshot.

PhoneGap Build - App Uploaded

 

Notice that in addition to building your app, you have the options to enable debugging and enable hydration. Debugging gives you access to a set of tools similar to the debugging tools available in your browser. Hydration helps with pushing code updates automatically.

If you want to generate the installation assets for each platform click the ‘Ready to build’ button. Doing this will result in the following screen.

PhoneGap Build - App Built

 

Step 3) Downloading your installers.

From the screen posted above you can see that by default you will have the ability to download builds for Android, iOS and Windows Phone. Although you can immediately download install assets for Android and Windows Phone right after building, you will need to provide a signing key for iOS before you can create iOS builds. Here’s some info on that: http://docs.phonegap.com/phonegap-build/signing/ios/

We will download an Android APK installer. Click on the Android button and a browser download prompt will display. Choose a folder on your machine to save your APK.

 

Step 4) Run the app on your Android phone
  • On your Android device, go into your security settings. Turn on the option to allow installation of apps from unknown sources.
  • Through some means, e.g. email attachment, get the APK install file on your android device and open it.
  • When you open the file it will ask you if you want to install it and at that time choose yes.
  • Congratulations you’ve now converted your web application into a mobile application and it’s running on your mobile device!

 

If you would like to view our final Android project you can download the apk file.

Sources

Share this
02 Feb 2017

Streaming Video Encoding Best Practices: Video Encoding by the Numbers

We’ve followed Jan Ozer for a while. To us he is one of the best and brightest when it comes to streaming video and encoding. We were pleased to find out that he’s released a recent book Video Encoding by the Numbers.

This book is chock full of detailed and quantitative information on the decisions behind how to encode your video no matter the content type.

Here’s some background information on the book:

Video Encoding by the Numbers teaches readers to optimize the quality and efficiency of their streaming video by measuring the impact of critical configuration options with industry-standard quality metrics like PSNR and SSIMplus. This takes the guesswork out of most encoding decisions and allows readers to achieve the optimal quality/data rate tradeoff.

Since all videos encode differently, the tests detailed in the book involve eight different videos, including movie footage, animations, talking head footage, a music video, and PowerPoint and Camtasia-based videos. The book walks the reader through quality testing, basic encoding configurations, encoding with H.264, HEVC, and VP9, and encoding for adaptive streaming, including technologies for transmuxing and dynamic packaging.

When appropriate, chapters conclude with a section detailing how to configure the options discussed in that chapter with FFmpeg, a preferred tool for high-volume video producers, including packaging into HLS and DASH formats (the latter with MP4Box). The book also details how to use key Apple HLS creation and checking tools like Media File Segmenter and Variant Playlist Creator.

and a link to Jan’s very informative blog and a description of the book in his own words: http://www.streaminglearningcenter.com/blogs/ozer-ships-new-book-video-encoding-by-the-numbers.html

Also, here’s a couple teaser images to get your appetite going. 🙂

Metrics to capture the optimal balance between time and quality

Metrics to capture the optimal balance between time and quality

 

Streaming Video: Encoding Time and Quality by Preset

Streaming Video: Lets use metrics to really measure what it means to have an efficient encode.

Anyway, check it out for yourself. We’re sure you won’t be disappointed.

Share this
02 Dec 2016

Quick JavaScript Sample: Saving time with Moment.js

moment.js logo
Often, developers are tasked with working with dates and times in their JavaScript applications. Although, JavaScript does offer a few methods to make this process easier for developers; there are times when custom functions or complex loops are needed. For instance, formatting dates and times or comparing one date with another.  Adding custom logic to work with this date and time data seems excessive in the day and age where there is a large community of developers that share libraries to help others.

 

Enter Moment.js

Moment.js has a variety of methods available to assist developers in parsing, validating, manipulating and displaying date and time data. If you are working on a project that involves manipulating date and time data moment.js can help save you time and keep your codebase much more streamlined.  Moment is pretty easy to use and can be installed in a variety of ways. Click here to see the full list of installation options so that you can find one that works for your application architecture.

In the remainder of this blog post we are going to use the Moment library to create a project time management application. This application keeps track of multiple tasks in a project so that the user can distribute available time efficiently. We will use Moment’s ability to adjust time with addition and subtraction methods, date formatters to display date/time in a user friendly format, and take the total of all tasks to validate a deadline.

We will also be using Angular as our JavaScript framework and Materialize to create a simple user interface. If you are interested in learning more on UI frameworks check out our blog post on Google Material Frameworks!

Source Code

Working Project

Let’s Build a Demo App with Moment

Before you start, you’ll need to determine the way you will install moment.js. We used bower but you can chose the best method for your project by looking at the options on Moment’s setup page.

We are building an application that shows a project and its deadline. It also shows a list of tasks and the amount of time it will take to do each task. The user can adjust the amount of time for each task by expanding the details panel for that task. The application will then use Moment to total the number of hours and minutes for the tasks to determine if the user is still on track to meet their deadline.

Here’s a screenshot illustrating the demo app.

 

Screenshot of moment.js based time management app

 

 

You can view the source code for the demo application here. Let’s take a look at where moment.js is used in our time management demo application.

Here are the places where we are using Moment in our app.

Formatting
In our application we need help with formatting our original deadline. Lets look at how its done.

$scope.deadlineDate = "2017-12-25 12:30:17";
$scope.deadline = moment($scope.deadlineDate).format('DD / MM / YYYY  HH: mm a');

We are capturing the deadline date and time to a deadlineDate variable. Then we send that variable in to the moment format() method to create a more readable date for the user. We are using ‘DD’ for double digit dates, the ‘MM’ for double digit month, a four digit year with ‘YYYY’ and the ‘a’ to display a lowercase am or pm.

There are a variety of ways you can format your dates and times. For a list of all the options take a look at the formatting section in Moment’s documentation.

 

Manipulation
We can also use moment.js to add and subtract date and time values. In our demo app, we need to figure out when we’ll be done if we add up the time needed to complete all tasks to the current date and time.

 $scope.timeTillDeadline = moment().add($scope.projHrs, 'h').add($scope.projMins, 'm').format('DD / MM / YYYY  HH: mm a');

To perform this calculation, we start with an empty moment method which will store the current date and time. We then add the project hours and project minutes to the current date and time that was captured by calling moment(). You’ll need to know that to add or subtract using moment you will need to order time increments from largest to smallest. In other words, when working with hours and minutes you will first need to add hours then add minutes.

You can learn more about manipulating time in Moment’s manipulation documentation.

 

Query
Moment.js is very useful in comparing two date or time values with each other. In our demo app, we determine if there is enough time to finish the project with the time it will take to complete all of the tasks.

$scope.stillHaveTime = moment( $scope.timeTillDeadline).isBefore($scope.deadlineDate);

Here we are using Moment’s isBefore() method to check that the projected deadline is before the calculated completion time for the project. Using isBefore() will return a Boolean.

Moment gives us a variety of methods to use to compare times and dates. You can view the full list in Moment’s query documentation.

In Summary

Moment.js is a very powerful, clean, and easy to use utility library that can save you a good chunk of time when working with dates and times in your applications. Now it’s your turn! See how you can use Moment to build fun and useful applications using date and time data.

Libraries Used in the Demo

Share this
08 Nov 2016

A Comparison of Material Design Frameworks – Samples

A few weeks ago we looked at a few different UI frameworks (Angular Material, LumX, and Materialize) that use material design elements. We compared the Maturity of the library, technologies they use, their design features and the size of each after minimizing the project. You can see the results of our comparison here . Today we are going to create an app to put them to use. Then, we will demo the results. We will create the same app three times in each of the frameworks to see the visual difference. From there we will see how easily each framework is implemented and the design differences of our final project when the app is complete.

We will be creating a real estate review app. This app will allow you to write a review on a property that you have just visited. We are keeping this application simple so we will only let the user see one property. We are going to to mostly use the prebuilt components that come with each framework and customize their styling as little as possible to give you an idea how each framework looks out of the box. This will result in our applications looking slightly different in order to demonstrate the available components and how the untouched version of each framework’s components fits in with the project as a whole.

The requirements for each app are as follows:

  • It will need to have a title bar with the name of the property
  • An image of the property will need to be displayed
  • There will be inputs to write the user’s name and a review
  • A button will exist to toggle from the property to a list of its previous reviews.

Lets see how each framework did when put to this test!

Materialize

imgresWe found material to be the quickest of the three to set up. It was done quickly with an npm install and linking the dependencies in the index of an Angular project. Materialize is a very basic framework and most of the prebuilt elements could be copied and pasted right into the application without much work. I was able to put the UI for this demo together much quicker than the LumX and Angular Material demos. Subjectively it also had the cleanest out of the box UI. Materialize did however fall short was on the javascript and Angular side, there were no prebuilt Angular helpers in any of the components so they all needed to be added custom to the project.

View Project on Github

Pre built components used for this project:

  • Card with reveal
  • Card Title
  • Collections items
  • Button with waves effect

Time from setup to completion:

  • 2 hours and 15mins

Cons:

  • Angular did not come with the framework and needed to be installed

Pros:

  • Really easy to use
  • There were many UI components ready to use and they all dropped right into my project beautifully.

 

Angular Material

angularmaterialAngular Material was also very easy to set up. They have very detailed documentation alongside the framework that gives you the step by step process of how to get going. Once my project was set up I had a bit more of a challenge finding the right UI components than with Materialize to quickly get my application built. In Materialize one of the prebuilt components that they offer is a card with a reveal button, that was perfect for toggling from my add review section to my reviews. In Material I had to get creative and use the sideNav component to reveal the reviews.

View Project on Github

Pre built components used for this project:

  • Card with action buttons
  • Input
  • Primary raised button
  • List with icon

Time from setup to completion:

  • 2 hours and 45mins

Cons:

  • The pre built components come with quite a bit of bloat in the code that you need to chip away at to use them in your own project

Pros:

  • Great documentation on how to get set up
  • Lots of components to choose from
  • Angular Included on install

 

 

LumX

lumxLumX was also quite easy to set up. It had clear documentation and multiple ways to go about getting started. LumX like Angular Material came with Angular as a dependency and had Angular helpers built into some of the components in the demos. Having Angular sped up the process of getting the app running. I do however think this framework fell a bit short on the UI side. The list of prebuilt components did not have as many useful variations as Angular Material and Materialize. I also could not find a component to perform the same functionality as the sideNav from Angular Material and the card with a reveal from Materialize, so I used a ng-hide to toggle the views between add review and read reviews. The Components that LumX did provide were easy to integrate and looked great.

View Project on Github

Pre built components used for this project:

  • Card with image on top
  • Raised button
  • Text field
  • List with icon

Time from setup to completion:

  • 3 hours

Cons:

  • They did not have a component I needed to reveal the previous reviews like the ones I found in Angular Material and in Materialize

Pros:

  • The UI components they had were easy to use
  • Project setup was quick because of good documentation
Side by Side

Now that we’ve discussed the pros and cons, lets take a look at implementations of the same app with these three different UI frameworks side by side.

Review Form

Previous Reviews List

 

Summary

In conclusion if you want to build a quick app that incorporates Google’s Material design all three of these frameworks are great options with their own pros and cons. I personally enjoyed using Materialize the most for this small app. It was the easiest to implement and the pre built components made it so I had to do very little work to build a great looking app.

Reference Links:
Share this
21 Oct 2016

Simple solutions for file download with HTML and Angular.js

Download icon

I was recently given an assignment where I needed to create a web app where a user could view a file from a remote server. They also needed to be able to hit a button to download that file. I had never built a download button, but the task seemed like it would be simple. I did a bit of research to see how other developers had attacked this problem in the past and what I found was that there were a few different ways to solve this.  There were node packages and quite a few unnecessarily complicated solutions that I came across. In the end the solution was using simple HTML  and Angular.js.  In the following blog post we will look closer at the HTML download attribute and how it can be used to make an application that dynamically downloads remote files.

 

The HTML Download Attribute

There is a download HTML attribute that can be used in a few different ways to create links, forms and buttons that allow you to download a file. If you have one set local file you want to create a download button for this is great! One line pointing to one file. You can even set the download name to something other than the original if you need to. Here are three ways to use the download attribute.  

 

As a link

<a href="path" download="new_file_name.fileType">Download</a>

As a button

 <a href="path" download="new_file_name.fileType"> <button>Download</button></a>

Using it in a form

<form method="get" action=”path.doc">

<button type="submit">Download</button>

</form>

 

Using the HTML Download Attribute to Solve my Problem

I now know that I can download a file using HTML. I know that I can get access to my remote files using an HTTP call. I created a quick function that switches out the selected files and injects them into the HTTP call I am making in order to switch files that the user is viewing and have them ready to download when the user hits the download button. Here is the code I used to do that.

 

The HTML

Here I use Angular’s ng-repeat to create a list of buttons that can be clicked to handle the method that sets the viewing and downloading of each file. Then I have used the HTML download attribute on a button that triggers the download of that file.

<h1>My File</h1>
</p>{{fileData}}</p>
<br>

<h2>Select a file</h2>
    <div ng-repeat="file in fileList">
        <button ng-click="setCurrentFile(file)">{{file}} </button>
    </div>

  <a href="myFile" download="{{file}}.filetype"> <button>Download</button></a>

 

The JavaScript

In my JavaScript I have my setCurrentFile method that I am calling in my HTML. When that gets hit it will set the myFile variable that we will use as the path to hit the server on out download button. It will also be passed to the jsonpServer method that will retrieve the data the user will view.

$scope.jsonpServer: function(myFile, callback) {
    $http.jsonp(myFile).success(function(data) {
        callback(data);
    }).
    error(function(data, status, headers, config) {
        callback(data);
    })


    $scope.setCurrentFile = function(file) {
        $scope.myFile = 'http://serverName/' + fileName '?callback=JSON_CALLBACK';
        $scope.jsonpServer(myFile, function(data) {
            $scope.fileData = data;
        })
    }
}

 

 

In Conclusion

When developing an application there are usually many ways to do one thing. Sometimes you can reach a solution with just a few lines of code. The HTML download attribute is a good example of how you can customize a simple HTML element to make a dynamic feature for an app without spending tons of time.

Share this
14 Oct 2016

CD Summit & Jenkins Days: Promising DevOps Technologies

I had the pleasure of attending CD Summit & Jenkins Days this week in Denver. The conference was very focused on Continuous Delivery, DevOps, and great team culture to promote best development and deployment practices. I’ve never been to this conference series before but it was a pleasant experience that I hope to check out again in the future.

If you are responsible for championing DevOps at your place of employment and wear many hats, it can be difficult to keep track of all the fancy new developments. Here’s a list of the new technologies that I learned about or dove deeper with while attending the conference:

Jenkins Pipeline

DevOps - Jenkins Pipeline View

  • Really cool way to manage your workflow from build to test to deploy.
  • Reminiscent of the fancy pipeline approach I dig about GoCD
  • Groovy DSL and Jenkinsfile yummies. Less UI-based configuration please!

IBM BlueMix Garage Method and ToolChains

DevOps - IBM Bluemix Toolchains

  • DevOps best practices through the Garage Method
  • Customizable Toolchains to get you from dev to deploy
  • Sweet Web-based IDE
  • Both free for anyone using BlueMix

Electric Cloud’s Electric Flow

DevOps - Electric Cloud Electric Flow

  • A fully featured and extensible release automation tool with a super slick UI
  • Free for up to 10 deploy nodes
  • So far about 180 different plugins

In Conclusion

I enjoyed my time at the conference and learned a lot. The tools above are the three most impressive that I saw and I look forward to playing around with them!

Share this

© 2017 RealEyes Media, LLC. All rights reserved.