Like many, I am always looking for things that can improve my design and prototyping workflow. When Adobe announced their Design System Package concept, I was very interested. Not having to constantly keep a browser window open to refer to syntax for a component or other design token I might need, sounded very appealing. Having written code-hinters for the Brackets editor in the past, I was more than will to a take a peak under the hood and see how this tool works.
At the heart of it, there is the extension for VS Code, which in turns consumes the design system package (DSP). While you can author a DSP completely within VS Code, it is really meant to be paired with Adobe XD, their prototyping and design tool. While I have been tinkering with the idea of creating a UI kit for the Ionic Framework in XD, that level of effort wasn’t one I was ready to take on yet. Instead, I turned to their icon library, Ionicons. Now, there are about 1,300 icons in that collection, so I was not really looking forward to importing them into XD to then generate the library to then create the DSP. Instead, I saw that the structure of the DSP is really just various folders and some JSON. Given that, I instead wrote a quick node app that would generate the package for me. After a few tweaks, I published the package.
Installation
From the command prompt run `npm install ionic-ionicons-dsp`
Open Adobe XD extension from command palette or via the icon in the lower right of the editor.
The extension should recognize that there is a DSP installed. If not, then choose “Load package”, “select folder”, then “open” from pop-up that finds the ionicons package within your project.
Type “ion”…. enjoy.
If you have any comments or ideas, please let me know chris.griffith at gmail.
With PhoneGap Build shutting down, many developers are now left trying to find options to continue building their Cordova-based applications. While several new services like Ionic’s Appflow and Monaca Cloud have entered the market as replacements. Their cost might be too much for the independent developer. One of the things that attracted many to use PhoneGap Build was it was included as part of your Creative Cloud subscription. There was even a free version for open-source projects. For those developers who are either resource constrained or want complete control over their build system, they should migrate to using the Cordova CLI and building locally.
There are four general steps we need to take to accomplish this:
Install the Cordova CLI
Install the native build environments
Migrate our existing PhoneGap Build App to use Cordova
Build and Test!
Step 1: Installing the Cordova CLI
The Cordova CLI is a free, open source tool that is actively maintained by many of the former PhoneGap team. It runs on Node.js and is available on NPM. You can learn more about it by visiting their site, https://cordova.apache.org/.
To install the Cordova command-line tool, follow these steps:
1. Download and install Node.js [https://nodejs.org/en/download/]. On installation you should be able to invoke node and npm on your command line.
2. Install the Cordova CLI using npm.
On OS X and Linux use the following command:
$ sudo npm install -g cordova
On OS X and Linux, prefixing the npm command with sudo may be necessary to install this development utility in otherwise restricted directories such as /usr/local/share. If you are using the optional nvm/nave tool or have write access to the install directory, you may be able to omit the sudo prefix. There are more tips available on using npm without sudo, if you desire to do that.
On Windows do the following:
C:\>npm install -g cordova
The -g flag above tells npm to install cordova globally. Otherwise it will be installed in the node_modules subdirectory of the current working directory.
To test the installation, simply run
$ cordova
on the command line with no arguments and it should print help text.
One of the major appeals of PhoneGap Build was not having to install the native build tools for each platform. This was especially true for Android, as it required multiple components to be properly installed. PhoneGap Build also allowed Windows users to compile iOS applications without needing a Macintosh.
Now that you are building locally, your will will need access to a Mac with Xcode installed to create your IPA files. Some options to get around this requirement are to use one of the “Mac in the Cloud” services or instead migrate to one of the PhoneGap Build replacements, or consider deploying your application as Progressive Web App.
Rather than rewrite the instructions outlined by the Apache Cordova team, I will point you to the specific instructions for each platform:
The iOS installation is basically just installing Xcode on your Macintosh.
Once this is done, we can validate that status of the tools by running a Cordova command to verify the state of them In the command line run the follow:
$ cordova requirements
You will see a report of the status of the various requirements. If something is not installed, you should go back and reinstall it.
Step 3: Migrate your existing PhoneGap Build App
The method I recommend is to migrate your existing PhoneGap Build app is to first start with a new Cordova application. To create a blank Cordova project using the command-line tool, navigate to the directory where you wish to create your project and run
$ cordova create [ID [NAME ]]
cordova create [ID [NAME [CONFIG]]] [options]
PATH ……………………. Where to create the project
ID ……………………… Reverse-domain-style package name – used in
NAME ……………………. Human readable name
With the basic application skeleton in place, we need to navigate to the project directory that was just created using the change directory, or CD command:
$ cd myapp
From the project directory, you need to add the platforms for which you want to build your app.
The general command is:
$ cordova platform add
To add the iOS platform
$ cordova platform add ios
To add the Android platform
$ cordova platform add android
These can take a bit to install, so be patient. Although you can install any platform, it does not mean you can compile for that platform.
With all the necessary requirements in place, we can perform our first build by running
$ cordova build
The process will take a bit, but it should generate the artifacts we need.
Since SDKs for Android and iOS come bundled with emulators, we can use them without the additional steps required to deploy them onto an actual device. We can target the emulator by running this command:
$ cordova emulate
The app will be built, the proper emulator launched and the app installed. This can take a bit. You may need to refer to the Cordova documentation to make sure you have the native environment setup correctly and the emulator/simulators configured correctly.
Now that we know we can build and emulate a basic Cordova app, we can move on migrating our actual application. With the platforms installed, let’s take a look at the directory structure that was generated:
There are some folders and files that might look familiar, and others that might be new to you. Now we can roll up our sleeves and do the real migration.
In most PhoneGap Build apps, you probably have a single www folder that contains your code, application resources and it’s config.xml file. This is typically the structure that I see:
resources
config.xml
css
img
index.html
js
Go ahead and replace the www folder that was created with the Cordova CLI with the contents of your PhoneGap Build www. Next, we are going to move your resources directory, the one containing your app icons and splash screens and move it to the root directory for the project. The final step will be editing the main config.xml file. By default, the Cordova CLI generates a bare-bones config.xml file, so references to any icons or splash screens are not included.
I recommend following standard directory and file naming structures to reduce possible headaches. In the main config.xml file add the following elements. If you are not targeting that particular platform, feel free to skip it.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
With the icons and splash screens migrated, we can turn our attention to adding any plugins that our PhoneGap Build application uses. The PhoneGap Build system would read the config.xml and use it to install the plugin into the build system. We need to perform this step ourselves. Open the config.xml file that you moved from your original PhoneGap Build folder. Your plugins will be individually listed in elements. The Cordova CLI command to add a plugin is
$ cordova plugin add
For adding the Statusbar plugin it would be:
$ cordova plugin add cordova-plugin-statusbar
If you need to install a specific version of plugin, append the version number after the plugin name. For example, if I wanted to instal the version 2.0.0 of the camera plugin I would use:
$ cordova plugin add cordova-plugin-camera@2.0.0
The final bit of heavy lifting is migrating all the other modifications you may have made to the original config.xml. These are things like app permissions or security settings. Go through the file and copy them into the new config.xml. If you need additional help with an element, see the Cordova documentation.
Once you have migrated the contents of the older config.xml file into the new one, delete the old config.xml from within the www directory. The same is true with the resources directory. Your www directory should only contain your HTML, CSS and JS files
Go ahead and try running the emulate command again
$cordova emulate
It might take longer than the first time, but once it finishes you should see your application running in the emulator!
Next steps…
Now that you have migrated from PhoneGap Build to use the Cordova CLI, there are some additional steps that will still be needed. PhoneGap Build took care of properly signing your applications for development or release. These are steps that you are now going to have to manage and perform. You can read the documentation about signing your applications on the Cordova website.
Good luck in migrating your apps to whatever build solution you use!
A few days ago, Adobe finally officially announced the end of PhoneGap Build. You can read the announcement on the Adobe I/O blog.
I want to first thank the entire PhoneGap team for everything they have done over the years! PhoneGap Build has been a big part of my professional life for a long time. I gave several workshops on it at Adobe MAX, used it as the foundation for my Intro to Mobile Development course at UCSD, and recorded training for LinkedIn Learning. This simple web service could take my HTML, CSS, and JS and create an app I could run on a phone, bypassing so many headaches of getting a local build to work as almost magical. If you want to see how hard it used to be, try finding some of the original instructions for setting up PhoneGap to work in Xcode.
I knew the end of PhoneGap Build was coming for some time, but could not formally say anything. The PhoneGap team had either left Adobe or was on to new projects. It was only a matter of time before something would break the ‘Build’. I tried to be as clear as I could on the Adobe forums to people, “It was time to move on.”
Now PhoneGap is not truly dead. When Adobe bought Nitobi all those years ago, what they really bought were two things; the PhoneGap name and the Build service. The code that is PhoneGap was given to the Apache Foundation and is alive and well as Cordova. So one option is to transition from building with the PhoneGap Service and begin building locally. I will have a guide for this ready in a few days. Another option is to migrate to one of the maintained services that do the same task. I have long been a user of the Ionic Framework, and they have a service, Appflow, which can fit the bill nicely. I wrote a migration guide for that service which you can read here [].
I will be still hanging out in the PhoneGap forums at Adobe for a while, trying to answer questions where I can. Otherwise, look for me hanging out on the Ionic Forums.
Thanks, PhoneGap, and let’s keep pushing the web forward!
When reviewing questions on the Ionic Forums, I often see questions that are frequently asked. I recently saw a request for help about creating a profile screen, and since I was working on similar features, so the request for help on implementing the design of this profile screen came at a good time.
The original design in this example was done by Sebastian Heit and was posted on Dribble. Before we dive into the code, let’s break down the design into sub-tasks to help focus the effort. First, this design has a transparent header and a full-width image as a header graphic. Next is the avatar image, Roger Federer, that sits in between the header image and the lower section. This is a standard design for many profile screens. Beneath the avatar is some player information and some social media buttons. The sample on Dribble included some tabs, but for my attempt, I will ignore that design element.
To recreate this design I needed to obtain visual elements. The header graphic (in this case a tennis court) and a headshot of Roger Federer. I found a nice profile image of Roger Federer without any trouble. For the header graphic, I searched Flickr for a suitable substitute. I found this image by Zepfanman.com, and it is available to be used by me.
I brought the image into Photoshop to apply the blue tint and the blur effect, giving me this result:
The revised image.
Getting Started
I generated a new Ionic blank template: $ ionic start profile blank –type=angular, then copied the background image and the avatar image into the newly created assets folder in the project directory.
Step 1: Transparent Header
The first styling task that I wanted to take on was to make the header transparent. Since Ionic’s header component supports this style, I just needed to add a translucent attribute to the ion-header tag. By itself, this will only make the header transparent while the ion-content will still be positioned under the header. This means if our content were to scroll, it would not scroll under the header. If that is what your design calls for, you need to add the fullscreen attribute to the ion-content as well and set it to true.
In the HTML template, I added buttons that were in the design; a button with an icon of the Back arrow with a label of Favorites and, a Checkmark button. Since this is not in a real app, the Back Arrow is an actual button in my sample. Typically, this would be an Ionic Back Button component in order to pick up the built-in navigation features.
Another thing to note is the checkmark button. Ionic’s icon library has that icon available. There was one minor issue with it in that the interior checkmark was transparent. This did not match the design, so I took the source SVG file and made a quick edit to change this. I saved this new version of the icon into the assets folder as well. That ion-icon will use the src attribute to point to my icon instead of the name attribute which will use the Ionicon library.
Header Image
The next step in recreating this design was applying that header image I prepared earlier. Switching from the HTML template file to the .scss file, this I can set the –background variable of the ion-content component to point to the background graphic. Positioning is set to be the top and center. As for how the image should be shown in the viewport, I opted for cover and fixed. I also did not want it to be repeated, so I included the no-repeat option.
In the .scss file, I also made sure that the ion-toolbar‘s background was transparent by setting its background variable to transparent.
If you save both files and run $ ionic serve in the command line, you should see the image being applied to the background and also under our transparent header.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Now to add the avatar image and the player content.
Step 2: Player Avatar
Creating the avatar portion of the design will be done using various divs and applying the correct CSS positioning types. Let’s being by defining the HTML structure. To begin, we will wrap everything in a basic div and give it a CSS class of card. This div will act as our master container for our content. Next, we will add another div that will provide the vertical spacing needed to show the rest of the header image. On that div, we will set the class to header. Within the header div, another div is added, which will be used to position the avatar image. Here is the full HTML snippet:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Switching to the home.page.scss file, we will add the CSS needed to style and position the avatar. The card class will center the content horizontally by setting the margin value to be 0 and auto. Then set the header class to define the height of the div to be 200 pixels. The avatar class is where the heavy lifting will begin. The width and height of this div will be the desired width of our avatar image. The critical CSS that needs to be applied is setting the position attributes value to relative. For good measure, we will set the margin to be 0 and auto (to ensure centering horizontally). Within the avatar div, the image tag will be defined by setting its source to a nice profile photo of Roger Federer. It is on the image tag that CSS will make our avatar how we want it. First, the display type is changed to block from inline. Next, the border-radius is set to 50% to generate a circle around the image. The border property is set to be 8 pixels, solid and our green (#9DC912). In case the image has transparency, set the background color to white. Otherwise, our header image will be visible inside the avatar. Those properties will get our shape and style correct, but will not solve our positioning needs. To fix that, change the position property to absolute. This will allow us to place the image where we want it. Since its parent’s position is relative, it will be set absolute with respect to its parent and not the page. However, we still need to define what that absolute location is. Here we can leverage the CSS calc function to solve this. While I could have supplied a pre-calculated number, I wanted to demonstrate the math behind the value. The goal of the calculated number is to place the image half-way down its height (including the border). In this case, it is 80 pixels (half the defined avatar width) + 4 pixels (half the border width) times -1, so that image is moved downward.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
Here is what the screen should look like at this point:
Since there is no additional content yet, the avatar will be ‘floating’ over our background.
Step 3: Player Information
With our avatar in place, we can turn our attention to the player information portion of the design. This portion is mostly a collection of traditional HTML tags, along with the ion-chip component and the ion-button component.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
The CSS for the card-body is where we need to set two things; the background color (white) and the height. If we don’t set a height value, this div might not fill the screen. To solve this, the CSS calc function will come to rescue again. This time we will take the full height (100vh) and subtract the header height we defined (200 pixels), as well as the toolbar’s height (56 pixels). We will also adjust the spacing, font size, weight, and color of some of the other elements as well.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
For styling the ion-chip, we just need to set the –background variable to #9DC912 and the –color variable to #fff.
The final touch is to set the overall CSS variables to align with our design. Using the Ionic Color Generator I altered the color set. Here are the changed color values:
If you have not worked with adjusting the global variables, these are defined in the variables.scss file. With that, we have recreated the profile screen!
Starting with the release of Android Oreo comes the need to support adaptive icons in our applications. Unfortunately, Cordova does not support this style of Icons directly yet. If you have built a Cordova application and installed it on either an Android device running Oreo or Pie, you will see your icon is shrunken within a white circle. To fix this we need to use Adaptive icons to have a proper looking app icon. I just released a lesson on egghead.io will show you how to generate an adaptive icon and adjust your config.xml file so it can be used.
Recently I gave a presentation on Electron to the JavascriptLA user group. I had a great time show what Electron can do. The presentation was recorded and you can watch it here.
Recently someone asked how to use PhoneGap Build and Ionic together. Being slightly familiar with both, I thought a short post on this would be in order. If you are not familiar with PhoneGap Build, it is a service from Adobe that allows you to compile your PhoneGap apps in the cloud. If you have a Creative Cloud account, you have access to this service. The service is fairly straightforward, take your web app, an associated config.xml file, and the app’s icons & splash screens, zip them up, then upload that file to PhoneGap Build. After a bit of work, you have native iOS and Android apps ready to be installed (providing you have your signing keys in order).
Using PhoneGap Build with Ionic based applications requires a few extra steps. First, we need to generate a production-ready version of our application. Normally, the Ionic build scripts that are run by the Ionic CLI handle this for use. But we are not building locally so this won’t help us. Instead, you need to make that call yourself. The command to generate a production ready app is
$ ionic build --prod –release
The Ionic CLI will run a set of commands generating your app in its production-ready state. This output is located in the www folder.
Now, we need to assemble the rest of the items that PhoneGap Build requires. In new folder, first copy over all the assets within that www folder. Next, copy over the config.xml file. If you are not familiar with this file, this is what PhoneGap/Cordova uses to define most of your app’s properties (icons, splash screens, plugins, etc). Speaking of icons and splash screens, we need to copy over the resources directory as well. In the end, you should have a folder that looks like this:
With all our required elements in place, simply zip this directory and upload it to PhoneGap Build. If you need more help understanding PhoneGap Build, you can check out my Lynda.com course.
Now, alternatively, you can use Ionic’s own Ionic Pro service to do the same thing, with a more integrated workflow.
I am honored to be speaking on Adobe XD at this year’s Big Design Conference in Addison, Texas in September. With my long history of user experience prototyping, Adobe XD is a welcomed addition to my arsenal of tools. Here is the description of the talk:
Go from idea to prototype faster with Adobe Experience Design CC (Beta), the first all-in-one cross-platform tool for designing and prototyping websites and mobile apps. In this session, Chris Griffith will show you how to design and prototype a complete experience using the new Adobe XD app. Learn tips and tricks to immediately be more productive creating a great user experience. He will introduce you to the capabilities of this rapid prototyping tool from its repeat grid to the built-in UI kits. He then will go further and show you how to share your work, gain feedback and even view it on your mobile device.
I am excited to announce the first initial release of my Ionic Native Mocks! Recently I was prototyping an Ionic app that required the use of the barcode scanner as part of the initial user flow. But by adding the Ionic Native module and the companion Cordova plugin, I would no longer be able easily to preview and debug the application locally within my browser. I often caution my students and workshop attendees to refrain from adding Cordova plugins until later in the development to avoid this slowdown.
To resolve this issue, I quickly created a mock provider for the barcode scanner, that would match the methods and properties of the actual Ionic Native wrapper. With this mock injected into my app, I could simulate interaction with the barcode scan plugin, and continue my local development.So, I then thought to myself, why create a library of mocks for the Ionic Natives that I could quickly inject into my app? This first release covers the Cordova plugins that included within the Ionic View app.
So, I then thought to myself, why create a library of mocks for the Ionic Natives that I could quickly inject into my app? This first release covers the Cordova plugins that included within the Ionic View app.
Ionic Native Mocks are designed to be used as placeholders during development for the actual Ionic Native modules. If you don’t know what Ionic Native is, here is the official summary:
Ionic Native is a curated set of wrappers for Apache Cordova plugins that make adding any native functionality you need to your Ionic mobile application easier.
Ionic Native wraps plugin callbacks in a Promise or Observable, providing a common interface for all plugins and making it easy to use plugins with Angular change detection.
Currently Available Mocks
actions-sheets
barcode-scanner
ble
bluetooth-serial
calendar
camera
contacts
date-picker
db-meter
device-motion
device-orientation
device
dialog
email-composer
geolocation
globalization
image-picker
keyboard
network
social-sharing
splash-screen
sqlite
status-bar
toast
touch-id
vibration
Installation
This project allows developers to use Ionic Native Mocks in place of the actual Ionic Native modules. They can be installed in via to methods.
via npm: Installing these prebuilt mocks is easy but they are not easily customized.
via GitHub and manually added to your Ionic project: Installing this way means the mocks can be customized to return specific data, like a specific parsing of a QR code.
Installation via npm
Run the following command to install an Ionic Native Mock into your project.
npm install @ionic-native-mocks/[plug-in] --save
For instance, to install the camera mock:
npm install @ionic-native-mocks/camera --save
You also need to install the Ionic Native package for each plugin you want to add. Please see the Ionic Native documentation for complete instructions on how to add and use the plugins.
Prototype A 
You must be logged in to post a comment.