Categories
Tutorial

How to reinstall macOS after hard drive is wiped

In case you wiped your Mac’s hard disk or erased it’s partition map (like me), don’t panic.

The bad news is if you don’t have your data backed up before, you probably lost them all already (Unless you pay professional data recovery company to help you salvage them). However, the good news is, you can have a fresh macOS on your machine soon.

1. Download the macOS installer

If you search online, you will probably find a bunch of guides that tell you to grab the full macOS installer from AppStore. This only works if you have a working Mac that still run a older version of the macOS version you want to install. For example, if you want to install High Sierra (10.13), you need a mac that’s running on Sierra (10.12). Which I wasn’t, and probably you aren’t.

So to get the macOS installer, your best chance is to torrent it from some torrent site. Of course, depending on where you live and the laws, it might be illegal to do so. So I can’t help you more here but it shouldn’t be hard if you have the right keywords to search.

2. Create bootable installer for macOS

You can follow this official guide from apple, it’s very informative and covers all the cases: https://support.apple.com/en-ca/HT201372

3. Mounting the missing hard disk

With all those task done, plug in your bootable USB into your Mac and power it up. Your mac should load the recovery utility in the USB without any keyboard press because your hard disk is wiped.

In the recovery utility, select Disk Utility. You want to make sure your disk0 which is your hard disk is listed. It’s should be at least 500GB for most iMac. It’s definitely not the 32 GB or even smaller drive, that’s your bootable installer USB. If you can see it in Disk Utility, go to the next step. If not, read on.

If it is not visible, which is possible because we wiped it, you need to fire up Terminal. You can do so by going to the menu bar at the top of the screen > Utilities > Terminal. Then type the command:

diskutil list

If you can see disk0 listed in the output, you can mount it by entering the following command:

diskutil mountDisk 0

This should do the job and you can verify by quitting terminal and go back to DiskUtility.

If you cannot mount the drive or the drive is simply not listed in diskutil list, then you probably have a hardware issue and hardware replacement is needed.

4. Erase the hard disk

Since we are doing a fresh installation, we need to erase the disk and start new. Yes, you will lose 100% of your data after this step.

You can do this using Disk Utility. Make double, triple sure that you selected your disk0 on the left sidebar. Click “Erase” at the top. Name it “Macintosh HD” and select APFS for the format option. Finally click Erase and this will reformat the hard disk.

You can quit the Disk Utility app after it’s done formatting.

5. Install macOS

Click Install macOS in the recovery menu.

Depending on how you got your macOS installation image, you might get the error “This copy on the Install macOS High Sierra.app application is damaged and can’t be used to install macOS” or similar.

This is because there is a certificate/signature of Apple contained inside the installer, and it is out of date compare to our Mac’s date.

We can by pass this by firing up Terminal once again, then type the following:

date 121501012018

The format of the date [mm][dd][HH][MM][yyyy]. This will overwrite the date of your machine.

Depending on the installer you are using, the date above may not work. If this happens, just change the date again and try the “Install macOS” option in the recovery menu again.

If you successfully get to the installation location selection screen, make sure you have the newly formatted hard disk selected, not the USB.

Then just follow the installer instruction to finish your installation.

Good luck and enjoy your new Mac!

Categories
Uncategorized

Parallax UITableView Header and Keeping it DRY

Last night I was working on a UITableViewController of a native iOS project. It was all standard stuff, so I feel like adding some eye candy to the view.

Many apps now add a Parallax Effect to their table view header, making the UI more lively and vivid. There are libs out there that do this for you, but then where is the fun in that.

So I went to search for a tutorial, there are some good ones, but I end up using this one from Matthew Cheok. Below is the final product of his tutorial.

alt text

The good things about Matthew’s tutorial is that he uses story board, has video instructions, and utilizes many things like struct and UIBezierPath.

When I applied Matthew’s technique into my project, I had a problem. I want apply this parallax effect to all my table views that has a header background image. As a good software developer, we should always keep our code DRY. So I did it with a some very simple setup.

Create ParallaxTableView class

First we will create a new UITableView subclass containing all the code needed to construct and update a parallax header:

import UIKit

class ParallaxTableView: UITableView {

    // these are public so we can change them in controller when needed
    var kTableHeaderHeight: CGFloat = 300.0
    var kTableHeaderCutAway: CGFloat = 80.0
    var kOverlapRatio: CGFloat = 3

    private var headerView: UIView?
    private var headerMaskLayer: CAShapeLayer?

    func constructParallaxHeader() {
        if self.tableHeaderView !== nil {
            // get the original table header
            headerView = self.tableHeaderView
            // remove the header from table view
            self.tableHeaderView = nil

            // add the header back to table view as a subview
            self.addSubview(headerView!)
            let effectiveHeight = kTableHeaderHeight - kTableHeaderCutAway / kOverlapRatio
            self.contentInset = UIEdgeInsets(top: effectiveHeight, left: 0, bottom: 0, right: 0)
            self.contentOffset = CGPoint(x: 0, y: -effectiveHeight)

            // construct cut away
            headerMaskLayer = CAShapeLayer()
            headerMaskLayer!.fillColor = UIColor.black.cgColor
            headerView!.layer.mask = headerMaskLayer
            // call the update to calculate header size and cut away
            updateHeaderView()
        }
    }

    func updateHeaderView() {
        let effectiveHeight = kTableHeaderHeight - kTableHeaderCutAway / kOverlapRatio
        var headerRect = CGRect(x: 0, y: -effectiveHeight, width: self.bounds.width, height: kTableHeaderHeight)
        if self.contentOffset.y < -effectiveHeight {
            headerRect.origin.y = self.contentOffset.y
            headerRect.size.height = -self.contentOffset.y + kTableHeaderCutAway / kOverlapRatio
        }

        let path = UIBezierPath()
        path.move(to: CGPoint(x: 0, y: 0))
        path.addLine(to: CGPoint(x: headerRect.width, y: 0))
        path.addLine(to: CGPoint(x: headerRect.width, y: headerRect.height))
        path.addLine(to: CGPoint(x: 0, y: headerRect.height - kTableHeaderCutAway))
        headerMaskLayer?.path = path.cgPath

        headerView?.frame = headerRect
    }

}

Most of the code is identical to Matthew’s tutorial, which you should definitely take a look if you have any trouble understanding what each line does.

Change the class of UITableView in storyboard

For any UITableView that you want to give it a parallax header, change its class to the ParallaxTableView class you just created.

Connect a IBOutlet from ParallaxTableView to its controller

We need an IBOutlet to the ParallaxTableView so we can call the construct and update functions when the table view is loaded. We do this by Ctrl-Drag, and I will name it parallaxTableView.

Call construct and update function in UITableViewController

Finally, we need to call the ParallaxTableView‘s function in the controller.

class ItemDetailTableViewController: UITableViewController {
    @IBOutlet var parallaxTableView: ParallaxTableView!

    ...

    override func viewDidLoad() {
        super.viewDidLoad()

        ...

        // call the construct function in viewDidLoad()
        parallaxTableView.constructParallaxHeader()

        ...
    }

    ...

    // MARK: - Scroll view delegate

    override func scrollViewDidScroll(_ scrollView: UIScrollView) {
        // call the update function in scrollViewDidScroll()
        parallaxTableView.updateHeaderView()
    }

    ...
}

Done

If you build and run your project now. Your UITableView should have a parallax header. If you want to add this to any other table view in your project, just change the class, add the outlet, and call 2 functions in its controller!

As you can see I have also made the configuration variables in ParallaxTableView to be public, so if you want a shorter parallax header, you simply do:

    parallaxtableView.kTableHeaderHeight = 100.0
    parallaxtableView.constructParallaxHeader()

Then your header will be 100 pixels tall.

Categories
Tutorial

React Native URL Scheme and Linking API

React Native is possible the best hybrid framework for building mobile app at the moment. Not just its performance but also the development experience it provides. If you build it well, one really can’t tell if your app is native or a hybrid.

I spent my last 3 month developing a complicated hybrid app using react native. It involves many network requests, forms, lists, etc. It was undoubtedly challenging, but the result was quite satisfying.

For my next project, I was given another chance to work with React Native. This time I need to build a “AppStore” kind of application, which allow the user to install apps and launch installed apps right from this custom “AppStore”.

To launch other Apps in iOS or Android, we must register custom URL Schemes in the Apps we wish to launch.

Register URL Schemes

iOS

On iOS, we need to add a key CFBundleURLTYpes to the Info.plist file within the Xcode project.

Under this key we add an array, and define 2 keys CFBundleURLName and CFBundleURLSchemes.

Under CFBundleURLName you need to add a unique string that identifies your bundle, I used the same string as my app’s bundle identifier and it worked fine. Under CFBundleURLSchemes you need to add another array, and put in your desired URL schemes.

Here is an example of such entry inside Info.plist:

<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleURLName</key>
        <string>com.johnsonsu.example</string>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>johnsonsu-example</string>
        </array>
    </dict>
</array>

More info about iOS URL Scheme can be found on the official documentation.

Android

Android’s setup is similar to iOS. We need to add a custom intent-filter in the Android app’s AndroidManifest.xml file.

Here is an example of such intent-filter:

<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="johnsonsu-example"/>
</intent-filter>

Since React Native’s Linking API will be creating an intent with action equals to android.intent.action.VIEW, your intent-filter must contain an action tag with this name.

The data tag is where you should define your custom URL Scheme. In this example I used the same one as the iOS scheme. Doing it this way allows me to use the exact same code in React Native to launch these applications in both iOS and Android.

More info about Android Intent Filter can be found on the official documentation.

Launching the App in React Native

If you setup your apps properly, you should be able to launch that app in React Native using:

import { Linking } from 'react-native';

Linking.openURL('johnsonsu-example://').catch(err => console.error('An error occurred', err));

If the OS can’t handle the URL you tried to open, the exception will be caught inside the catch block, and you should handle it properly to prevent a crash.

A safer way to open URL is to check if the OS can handle it before you open it. You can check it using:

import { Linking } from 'react-native';

const url = 'johnsonsu-example://';
Linking.canOpenURL(url).then(supported => {
  if (!supported) {
    console.log('Can\'t handle url: ' + url);
  } else {
    return Linking.openURL(url);
  }
}).catch(err => console.error('An error occurred', err));

This works on Android without any setup. However, on iOS 9 or above, you need to add LSApplicationQueriesSchemes to your React Native app’s Info.plist or Linking.canOpenURL(url) will always returns false.

This is an example entry in Info.plist:

<key>LSApplicationQueriesSchemes</key>
<array>
    <string>johnsonsu-example</string>
    <string>youtube</string>
    <string>facebook</string>
</array>

There you have it, a simple way to launch any other apps from your React Native app!