In order to work with the Ionic framework version 2 there is a bit of software installs and configuration that needs to happen in order to deploy to devices. However, many of the guides out there leave out a number of steps that tripped me up when I first started using Ionic.
This guide will go through all of the steps needed for deploying to an Android device using a Windows machine. Note that deploying to an iOS device requires a Mac.
In order to work with the Ionic framework there is a bit of software installs and configuration that needs to happen in order to deploy to devices. However, many of the guides out there leave out a number of steps that tripped me up when I first started using Ionic.
This guide will go through all of the steps needed for deploying to an Android and iOS device using a Mac.
Today I ran into an issue using Ionic, where I was trying to put two icons on the right side of an ion list item. There is really easy to do with the item-icon-right css class. Unfortunately, when you have multiple icons, it overlaps instead of showing them side by side. I was not expecting this as I had only used 1 icon before and assumed that item-icon-right would just put them side by side.
When you are creating a mobile applications there are times where you need to notify users about something such as an upcoming appointment. If the application is running and the user is using it in the foreground, this is easy to accomplish. However, if the application is running in the background this can be a challenging task. You could do push notifications but that takes a decent amount of work to setup with both iOS and Android app stores. If all you need to do is alert them on their local device you can just use the cordova local notification plugin and skip the headache of setting up push notifications.
After following Raymond Camden’s Strongloop Introduction, I was ready to update the todo demo application that I have been using for the Ionic Arizona Meetup. So I created a models for projects and app users. The app users model base class was User. Then within the project model I associated a project to an app users with a belongsTo and in the app users model I associated multiple projects to a single user with a hasMany. At this point, when I examined the API explorer I could see that it can me a rest endpoint to get the projects associated to a user. However, I ran into an issue with getting 401 Unauthorized errors when I tried to query any of the rest endpoints to get the projects associated to the user.
I am doing an Ionic Framework presentation and I wanted to use the Visual Studio 2015 Cordova Tooling.
I have done this presentation twice in the past couple of months using my Intel Nuc machine with the Visual Studio 2015 RTM Cordova tooling but it is kind of pain to do this since the Nuc is a desktop machine and doesn’t have a monitor so I have to look at the projector screen or being a laptop to use as well. Setting up 2 machines in 15 minutes as well is a pain and hoping that the remoting from the laptop to the Nuc is stable just asking for trouble even with a travel router that I have.
As you work on an Ionic based project or for that matter any web projects that have javascript or css file, you will at some point forget to add your new javascript or css file to the page and wonder why the page is broken. This is really annoying when it happens as many times you spend quite a bit of time troubleshooting before you realize that you just forgot to add the script or css tag. You can fix this problem using gulp and the gulp inject module to automatically add the script and css tags onto the page.
I ran into an issue today on the vagrant IonicBox when I tried to create a new Ionic project at work behind the firewall/proxy even with all of the configurations for npm, git, bower, and bash setup for the proxy as detailed at proxy-configurations.
Luckily, Ionic had a fix for this already.
Linux
All I had to do was put PROXY=http://myserver:myport in front of the ionic start command.
PROXY=http://myserver:myport ionic start todo blank
Windows
If you have looked at setting up the Ionic Framework or have it done it before, you know on much of a pain it can be, especially when something doesn’t work. Luckily, Ionic offers a free virtual machine called Ionicbox that is already configured with all of the software that you need.
Before you can use Ionicbox you need to install VirtualBox and Vagrant. If you are on Windows and using Chocolatey, you can install both using cinst virtualbox and cinst vagrant.
Updates:
If you are like me and just starting to work with the Ionic Framework and don’t already have a machine setup to do Android, iOS, Node, etc development then many of the guides out there leave out a number of steps that you need to do in order to get everything working.
Updates:
If you are like me and just starting to work with the Ionic Framework and don’t already have a machine setup to do Android, iOS, Node, etc development then many of the guides out there leave out a number of steps that you need to do in order to get everything working.
Even being a Windows user I was able to pretty easily get Ionic working on a Mac. The only difference between the Windows setup and the OSx setup is that you can build for an iOS device on a Mac.
The Android emulator is super super slow and I could never get it working on my development virtual machine. I thought no problem I will just use Genymotion but due to a video card driver issue on my laptop (not Genymotion’s fault), I couldn’t use it either. I was thinking ok I will just have to use a real device and always have it on me when I do Android development work. This wouldn’t have been ideal though since Android development work is just a side project and who wants to carry an extra device just in case you get a few minutes to work on the project.