Slay Pixel Works Blog

I’ve had to explain this a few times lately so I thought I would put it in a post. This is a very simplified description of how the internet works with respect to domain names! How does your browser know where to go when you type in example.com? With this understanding, you will understand some of the steps involved in setting up your own domain name on a website.

The contents of websites are "hosted" on servers ... which are basically big computers. Each can be accessed by an "Internet Protocol" address (or IP address). This is a unique number that identifies the location of a server/computer. Think of it as a phone number.

When you type in a "Domain Name" in your browser (e.g. example.com) it needs to know where to send your request to get the content for the web page. So your request goes from your computer to your Internet Service Provider (ISP). Your ISP will say, "Hmmm. Where do I get that content from?". The ISP then sends a request to a "Domain Name System" (DNS). There are many DNS's around the world. They basically act as a phone book for the Internet. They will say example.com should go to a certain IP address (e.g. 12.34.56.78). So now your computer knows how to get content when you type in example.com. It is like looking up a name in your contacts on your phone. You know the person's name but not their phone number. This is a very much simplified version but that is basically how the internet works!

In order for the Domain Name Systems around the world to have the correct information (e.g. example.com should take you to 12.34.56.78) they rely on routinely fetching this information from a series of "DNS hosts" (sometimes referred to as "Name Server" hosts). There are a number of registered DNS hosts on the internet. So a DNS host is required to have a functioning website.

So when you want to set up a website, first you register a domain name (e.g.example.com) from a "domain registrar" (there are many of these - e.g. GoDaddy). They interact with a central repository of names on the Internet so there can't be duplicates. The domain registrar stores "Name Server" records. This information is used by the Domain Name Systems to go and fetch the "contact book" information from the DNS hosts. The Domain Name Systems will routinely contact the DNS hosts to see if there have been any updates. This is why it can take a little while for the changes to take place when you change the location of where you are hosting your website. Usually, it is inside of an hour but it can be up to 24 to 48 hours. This is known as "propagating".

To make matters even more confusing some Domain Name Registrars provide DNS hosting, some web hosts provide it, and there are some stand alone companies that do it. Some are free and some are paid for services.

As of NativeScript 1.6:

1. Go to app/App_Resources/iOS. 

2. Open Info.plist

3. Change “Bundle Display Name” to whatever you want. 

4. Change “Bundle Name” to whatever you want.

I had a hard time getting this going. There is a bit of discussion about it here: https://github.com/NativeScript/ios-runtime/issues/281. Given I finally figured it out I thought I would share. 

To use a LaunchScreen.xib (rather than having to create lots of different sizes):

1. Delete the splash screen images from the app/App_Resources/iOS directory.

2. Open the platforms/ios/ExampleApp.xcodeproj file in Xcode.

3. Select your "Target" and then select the "General" tab.

4. Scroll down until you see the "App Icons and Launch Images".

5. Make sure that "LaunchScreen" is listed in the "Launch Screen File" field.

6. In the left column of XCode, expand "ExampleApp" (obviously your app will be called something else), click on "Images.xcassets" item.

7. Right click in the column second from the left and select "New Image Set". Name it "LaunchScreen" (or similar). Drag and drop 1x, 2x and 3x versions of the image you want to use in your splash screen.

8. In the left column of XCode, expand "Supporting Files" and click on "LaunchScreen.xib".

9. In the right column select the "Show Object Library" in the bottom pannel and in the filter type "image".

10. Drag and "Image View" from this panel to the screen in the middle. You should be able to resize.

11. In the right column, select the "Show Attributes Inspector". Under the "Image View" section, click on the "Image" field and select the LaunchScreen image you just created. Resize and align it as you see fit.

12. While holding down the "Control" key, click on the image you just added and drag a little bit. A menu will appear. Select "Center Vertically in Container". Do the same again and select "Center Horizontally in Container".

13. Close down XCode and build your app and you should have a splash screen.

UPDATE (9/3/16)

As pointed out here and in the documentation, anything in the `platforms/ios` directory is liable to be blown away and anything in there is not part of source control. Beware. Hopefully in future versions of NativeScript we will be able to put a LaunchScreen.xib in the `app/App_Resources/iOS/` directory.

EDIT - This post is obsolete as of NativeScript 1.7

This was as of NativeScript 1.6.

To set your app icons in Xcode:

1. Delete the app icons from the app/App_Resources/iOS directory.

2. Open the platforms/ios/ExampleApp.xcodeproj file in Xcode.

3. Select your "Target" and then select the "General" tab.

4. Scroll down until you see the "App Icons and Launch Images".

5. Select "Use Asset Catalog" next to the "App Icons Source" label (don't select the option to do the same for "Launch Images").

6. Click the little arrow next to the "App Icons Source" field.

I am trying to move away from using Appcelerator Studio in favour of using the Open Source version of Titanium. I tried using David Bankier’s TiSDK (https://github.com/dbankier/tisdk) but it does not list the 5.0.0 beta (or nightly builds). There has been talk that Appcelerator would not provide the latest version of the Ti SDK to non-subscribers ... but noted you could still build from source. I think (would like others to confirm) that you don’t need to do this. 

Below is what I did to get it going ... and here are a few notes that I got stuck on briefly. 

1. I downloaded the nightly build I wanted from here (http://builds.appcelerator.com.s3.amazonaws.com/index.html#5_0_X). I followed the instruction here to install it manually (http://docs.appcelerator.com/platform/latest/#!/guide/Building_the_Titanium_SDK_From_Source-section-35620794_BuildingtheTitaniumSDKFromSource-ToInstalltheSDKManually).

2. Run `$ ti sdk` to make sure that is is available.

3. To “select” it, run `$ ti sdk select` and select the version you want. 

4. I tried creating a project to test but if failed. There was a non-specific issue with longjohn.js. I searched around and one suggestion was to make sure you had the latest version of the Titanium CLI. 

5. To install the latest version of Titanium CLI run: `$ npm install -g titanium`

6. I still had non-specific errors so I ran `$ ti info` to see if there are any other errors. My system was “Unable to locate an Android NDK.” It suggests a solution which I followed. 

7. I then ran `$ ti create` ... and from then on I was able to create, and build projects just like normal. 

When a user emails a support request I put the "Model Identifier" of their device (amoung other things) in the email so I know what device they are on. It helps in working out what they are asking and in tracking down any potential problems.

Titanium gives you the "Model Identifier" of the device. Apple have a somewhat confusing versionsing system so if you want to work out what the publically known device name is, use the table below.

.modelTable { width: 100%; } .modelTable td, .modelTable th { border: 1px solid #CCC; padding: 5px 10px }

iPhone

Device Name Model Identifier iPhone (Origional) iPhone1,1 iPhone 3G iPhone1,2 iPhone 3Gs iPhone2,1 iPhone 4 (GSM) iPhone3,1 iPhone 4 (CDMA) iPhone3,3 iPhone 4s iPhone4,1 iPhone (GSM) iPhone5,1 iPhone (CDMA) iPhone5,2 iPhone 5c iPhone5,3 iPhone 5c iPhone5,4 iPhone 5s iPhone6,1 iPhone 6 Plus iPhone7,1 iPhone 6 iPhone7,2 iPhone 6s iPhone8,1 iPhone 6s Plus iPhone8,2 iPhone SE iPhone8,4 iPhone 7* iPhone9,1* iPhone 7 Plus* iPhone9,2*

*assumed

iPad

I have the following requirement. A user taps on a link in an email or on a web page and it opens up my app and passes through some data (to pre-populate a form). I had no issues doing this on iOS buy using a custom protocol (e.g. myapp://form?data1=1&data2=2) but on Android I ran into an issue. When the app is already open (i.e. it is resumed) when you tap on the link, the data in the URI is not passed through. It is fine when you open the app from scratch but it strips the data when the app is already open. 

This lead me to try using Android Intents using an HTTP URL to open the app. The example on the Appcelerator website (http://docs.appcelerator.com/platform/latest/#!/guide/Android_Intent_Filters-section-43287610_AndroidIntentFilters-URIIntentFilterExample) did not work for me. I then read Fokke’s two part article on URL Schemes (see: http://fokkezb.nl/2013/08/26/url-schemes-for-ios-and-android-1/ and http://fokkezb.nl/2013/09/20/url-schemes-for-ios-and-android-2/). He included an important element - you should include the path in the intent filter. That allowed me to get it going. 

I had one other requirement. I still wanted to be able to use registered protocols (e.g. myapp://) to open the app, as well as HTTP URLs (e.g. http://mayapp.com/open?type=form&data1=1&data2=2). Below is the code that I used in my TiApp.xml file to get this going.

<android xmlns:android="http://schemas.android.com/apk/res/android"> <manifest android:installLocation="auto" android:versionCode="1" android:versionName="1.0.0.0"> <application android:theme="@style/Theme.MyApp"> <activity android:name=".MedicamActivity" android:label="@string/app_name" android:theme="@style/Theme.Titanium" android:configChanges="keyboardHidden|orientation" android:alwaysRetainTaskState="true"> <intent-filter> <action android:name="android.intent.action.MAIN"/> <category android:name="android.intent.category.LAUNCHER"/> </intent-filter> <intent-filter> <action android:name="android.intent.action.VIEW"/> <category android:name="android.intent.category.DEFAULT"/> <category android:name="android.intent.category.BROWSABLE"/> <data android:scheme="myapp" /> </intent-filter> <intent-filter> <action android:name="android.intent.action.VIEW" /> <category android:name="android.intent.category.DEFAULT" /> <category android:name="android.intent.category.BROWSABLE" /> <data android:scheme="http" android:host="myapp.com" android:path="/open" /> </intent-filter> </activity> </application> ... </manifest> </android>

Wherever you see "myapp" replace with your app name.

Now, whenever you tap on a link to http://myapp.com/open?type=form&data1=1&data2=2 your app will open and the data will be passed through. To capture the data simply use the following in the index.js (root controller).

if (OS_ANDROID) { alert(Ti.App.Android.launchIntent.getData()); }

Note that when you tap on the link in the browser it will prompt you to open the link in your app or in the browser. Once you select your app it will ask "just once" or "always". This is not ideal but still okay for my needs. It could be a bit of a pain if the user selects "browser" and "always"!

I am constantly looking this stuff up so I thought I would put it all in the one place for easy access. It is the different densities for Android relative to iOS ... and the different icon sizes for different Android screen densities.

#densityTable { width: 100%; } #densityTable td, #densityTable th { border: 1px solid #CCC; padding: 5px 10px }

I have an app that has a bunch of screens and it is not uncommon to want to hit the back button in quick succession to navigate back to the home page. The problem is, if you hit that back button one too many times it closes the app. I did not want to completely disable the back button to close the app as that is how a lot of people close the app. I don’t want to annoy people. Here is a solution to prevent help with this.

On the homepage of your app (where you want to prevent the app from closing) put this in the controller.

$.index.addEventListener("android:back", function(e) { var dialog = Ti.UI.createAlertDialog({ cancel: 1, buttonNames: ["Close", "Cancel"], message: "All data not submitted will be lost. Are you sure you want to close the app?", title: "Close the app" }); dialog.addEventListener("click", function(e){ if (e.index === 0) { Ti.Android.currentActivity.finish(); } }); dialog.show(); });

Another issue that took me ages to figure out but has a simple solution. The new way of doing 9-Patch splash screens is in the Titanium documentation. See: http://docs.appcelerator.com/platform/latest/#!/guide/Icons_and_Splash_Screens-section-29004897_IconsandSplashScreens-Splashscreens

Put your different sized background.9.png files in the respective folders. I did this and it was not working properly. The image was not scaling properly. The image was about 90% of the screen and it had weird black bars in places.

I assumed it was due to using custom themes. It was not! If you are using custom themes, I found I could safely ignore the section on "Splash Screen with a Custom Theme". I tried it and I could not build my project (4.1.0 of the SDK) using that technique.

I had to do a lot or reading and trial and error to get this working so I thought I would share. Steps:

Add in these 2 lines in your tiapp.xml file:

<application android:theme="@style/Theme.MyTheme"/> <uses-sdk android:minSdkVersion="14" android:targetSdkVersion="22"/>

Note the theme name "MyTheme". You change change that if you like. The targetSdkVersion MUST be 21+ for this to work. The Android section of your tiapp.xml file should look something like below.

<android xmlns:android="http://schemas.android.com/apk/res/android"> <manifest android:installLocation="auto" android:versionCode="1" android:versionName="1.0.0.0"> <application android:theme="@style/Theme.MyTheme"/> <uses-sdk android:minSdkVersion="14" android:targetSdkVersion="22"/> <supports-screens android:anyDensity="true" android:largeScreens="true" android:normalScreens="true" android:resizeable="true" android:smallScreens="true" android:xlargeScreens="true"/> <uses-feature android:name="android.hardware.touchscreen" android:required="true"/> <uses-feature android:name="android.hardware.screen.portrait" android:required="false"/> <uses-feature android:name="android.hardware.wifi" android:required="true"/> <uses-feature android:name="android.hardware.telephony" android:required="false"/> <uses-feature android:name="android.hardware.camera" android:required="true"/> <uses-feature android:name="android.hardware.camera.any" android:required="true"/> <uses-feature android:name="android.hardware.location" android:required="false"/> <uses-feature android:name="android.hardware.location.gps" android:required="false"/> <uses-feature android:name="android.hardware.location.network" android:required="false"/> <uses-feature android:name="android.hardware.sensor.accelerometer" android:required="false"/> <uses-feature android:name="android.hardware.sensor.compass" android:required="false"/> <uses-feature android:name="android.hardware.sensor.gyroscope" android:required="false"/> <!-- <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/> --> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/> <uses-permission android:name="android.permission.INTERNET"/> <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/> <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/> </manifest> </android>

If it does not already exist reate the folloing file:

/platform/android/res/values/custom-theme.xml

In that file put the following:

<?xml version="1.0" encoding="utf-8"?> <resources xmlns:android="http://schemas.android.com/apk/res/android"> <style name="Theme.MyTheme" parent="@style/Theme.AppCompat.Light.DarkActionBar"> <item name="colorPrimary">@color/primary</item> <item name="colorPrimaryDark">@color/primaryDark</item> <item name="colorAccent">@color/primaryDark</item> <item name="colorControlActivated">@color/colorActivated</item> <item name="colorControlHighlight">@color/colorHighlight</item> <item name="colorControlNormal">@color/control</item> <item name="colorSwitchThumbNormal">@color/buttons</item> <item name="android:colorButtonNormal">@color/buttons</item> <item name="android:colorEdgeEffect">@color/primary</item> <item name="android:navigationBarColor">@color/primary</item> <item name="android:statusBarColor">@color/primary</item> <item name="android:textColorPrimary">@color/textPrimary</item> </style> <color name="colorActivated">#DF4D94</color> <color name="primary">#DF4D94</color> <color name="primaryDark">#B23E76</color> <color name="textPrimary">#333333</color> <color name="accent">#DF4D94</color> <color name="colorHighlight">#e571a9</color> <color name="buttons">#CCCCCC</color> <color name="control">#999999</color> </resources>

What each is for should be self explanatory. Note, I am using the "AppCompat.Light.DarkActionBar" as the default/fallback theme.

You should now have the material theme in your project!

Note, if you want to use 9-patch splash screens you do NOT have to modify the custom theme as suggested in the Titanium documentation at the time of writing this.

I find this quite helpful during development.

Find the currently used database

$ find ~/Library/Developer/CoreSimulator/Devices -name "breathe.sql" -print0 | xargs -0 ls -1t | head -1

Copy the path (and don't forget quotes) and run (this assumes you have the SQLite Database Browser from https://github.com/sqlitebrowser/sqlitebrowser/releases):

I find myself putting this in the README of each project I create. I thought I would share. It pretty much all comes from here: http://docs.appcelerator.com/platform/latest/#!/guide/Titanium_Command-Line_Interface_Reference

To run on the iOS Simulator, an iOS device, and an Android device (you will need to select the developer certificate and the provisioning profile).

$ ti build --sdk 4.1.0.GA --platform ios --ios-version 8.4 --target simulator -C ? $ ti build --sdk 4.1.0.GA --platform ios --ios-version 8.4 --target device $ ti build --sdk 4.1.0.GA --platform ios --ios-version 8.4 --target dist-appstore $ ti build --sdk 4.1.0.GA --platform android --target device

To run TiShadow on the iOS Simulator, an iOS device, and an Android device

If ever you need to create an app video for the app store, here are a few things that you might find helpful.

To create the video itself

Follow instructions here: https://developer.apple.com/app-store/app-previews/imovie/Creating-App-Previews-with-iMovie.pdf

iMovie is not the most intuitive program to use but it is okay.

Music

I got some free music from Free Soundtrack Music (http://subs.freesoundtrackmusic.com/musiclib). Free Music Archive (http://freemusicarchive.org/) is also good.

Premium Beat (http://www.premiumbeat.com/) have much better music here but it costs US$40. The advantage of this is they come with 15 and 30 second clips so you don't need to edit the music.

Other screen sizes

The instructions above leads to one video for whatever sized phone you have. Unfortunately you need videos for each of the 4.0, 4.7 and 5.5 inch screens. It is a bit of messing around creating the video with transitions, titles, timing everything, etc. Also, I don't have an iPhone 6 so rather than borrowing phones I thought I'd convert them using FFMPEG.

The video for the 4.0 inch screen (iPhone 5) has to be 640 x 1136 

The video for the 4.7 inch screen (iPhone 6) has to be 750 x 1334

The video for the 5.5 inch screen (iPhone 6 Plus) has to be 1080 x 1920

To do this:

Download FFMPEG (http://ffmpegmac.net/)

Place somewhere (I put it here: /Users/raef/Documents/Software/ffmpeg/ffmpeg).

Right click on it and open it in terminal. It will give you the warning about opening software. You have to allow this before you can use the program from command line.

I called my exported file origional.mp4. I then ran the following commands to convert the videos (although I did not need to convert the 5.5 inch one I did as it compresses it): $ /Users/raef/Documents/Software/ffmpeg/ffmpeg -i origional.mp4 -filter:v scale=750:1334 -c:a copy 4-7.mp4

$ /Users/raef/Documents/Software/ffmpeg/ffmpeg -i origional.mp4 -filter:v scale=640:1136 -c:a copy 4-0.mp4

$ /Users/raef/Documents/Software/ffmpeg/ffmpeg -i origional.mp4 -filter:v scale=1080:1920 -c:a copy 5-5.mp4

You now have the videos. You have to upload them via Safari.6. Once uploaded you can click on them and pick the screen that it shows by default.

I love using Titanium. Here is how I use it:

I almost exclusively use it from the command line. 

I don’t really use Titanium/Appcelerator Studio.

I use TiShadow rather than Live View.

I don’t use Arrow or any of the Appcelerator Cloud Services.

I don’t use the Marketplace and instead get open source modules (so I am not held at the mercy of a developer that has not updated a module).

I have a few projects that I work on with other people. With Appcelerator's new pricing scheme I would need a team license (so we can collaborate). So the conundrum. I want to support Appcelerator but I feel $269 per month is a bit steep.

Anyway, given I don’t really use any of the features other than the open source project, I was please to see a neat little tool that made it even easier to install the latest versions of the Titanium SDK. David Bankier has created TiSDK (https://github.com/dbankier/tisdk) which allows you to easily install the open source part of Titanium from command line.

Some useful commands

List available GA and RC builds: $ tisdk list

Install: $ tisdk install [version]

List installed versions of the SDK: $ ti sdk