Month: July 2017

Xamarin installation in Mac

Setup Xcode

Xcode is needed for iOS development. It included with SDK to build iOS codes and iOS Simulators.

  1. Go to AppStore and search for Xcode. Click GET and INSTALL it. You will need to input your Apple ID and password in order to download app from AppStore.
    Screen Shot 2017-06-29 at 5.24.22 PM.png
  2. You will need to Agree on the License Agreement before Xcode start to download and install.Screen Shot 2017-06-29 at 6.10.53 PM.png
  3. Xcode will start to download (4GB++) now. The installation will start automatically after download completed. After that, click on Xcode button to start the app for once. During the first start, Xcode will initialize and install some components.
    Screen Shot 2017-06-29 at 6.11.16 PM.png
  4. After the initialization is completed, you should see the following screen. Xcode is successfully installed and you may close it now. Screen Shot 2017-06-29 at 6.12.15 PM.png

Setup Visual Studio for Mac

Xamarin development in Mac will be using Visual Studio for Mac.

  1. Download installer from visualstudio.comScreen Shot 2017-06-29 at 6.17.46 PM.png
  2. Double click on downloaded installer and you will see the following dialog popup. Double click on the Install button to start installation.
    Screen Shot 2017-06-29 at 9.07.51 PM.png
  3. Click Open button when there is a warning dialog popup.Screen Shot 2017-06-29 at 9.08.05 PM.png
  4. Visual Studio installer will now started and performing some checking on the machine.
    Screen Shot 2017-06-29 at 9.08.28 PM.png
  5. You will need to agree on the Microsoft Privacy Statement and License Terms in order to continue installation. Just click on Continue button.Screen Shot 2017-06-29 at 9.08.45 PM.png
  6. The installer will ask to get Xcode. We already completed this part and will just click on Continue button.
    Screen Shot 2017-06-29 at 9.09.03 PM.png
  7. Select all components that you would like to install. Then click on Install button.
    Screen Shot 2017-06-29 at 9.09.16 PM.png
  8. Components will start to download (~3.5GB). Screen Shot 2017-06-29 at 9.09.48 PM.png
  9. After half an hour, the installation is mark as successful. Click on Start Visual Studio button.Screen Shot 2017-06-29 at 9.32.37 PM.png
  10. Visual Studio for Mac is started and ready to build awesome app.Screen Shot 2017-06-29 at 9.33.30 PM.png

Setup Android SDK

  1. Click on Tools>SDK Manager
    Screen Shot 2017-06-29 at 10.13.09 PM - Copy.png
  2. A dialog is show but indicating Android SDK and Android NDK is not found. This might be due to we didn’t check to install Android SDK during Visual Studio for Mac installation.Screen Shot 2017-06-29 at 10.13.22 PM.png
  3. Run the Visual Studio for Mac installer again and Continue until Select components screen. Check to install Android SDK and click Install button.Screen Shot 2017-06-29 at 10.24.31 PM.png
  4. Android SDK started to install.Screen Shot 2017-06-29 at 10.25.08 PM.png
  5. After the installation completed, click on Tools>SDK Manager. SDK Manager dialog will popup.Screen Shot 2017-06-29 at 10.27.35 PM.png
    Screen Shot 2017-06-29 at 10.28.14 PM.png
    Screen Shot 2017-06-29 at 10.28.23 PM.png
  6. Update Android SDK according to recommended list in HERE

Installation Test: Xamarin iOS

  1. Open Visual Studio for Mac and click on New Project. New project dialog will popup. Select Xamarin.Forms>Blank Forms App and click Next button.Screen Shot 2017-06-29 at 10.29.03 PM.png
  2. Give the app a nameScreen Shot 2017-06-29 at 10.29.40 PM.png
  3. Specify Project Name, Solution Name and Location. Finally, click on Create buttonScreen Shot 2017-06-29 at 10.29.50 PM.png
  4. 3 projects is automatically generated by Visual Studio for Mac. Make sure XamInstall.iOS project is selected (project name is bold), then click Play button to RUN the app.Screen Shot 2017-06-29 at 10.30.33 PM.png
  5. Visual Studio will build the solution and deploy to iOS Simulator. If you can see this, it means that you have successfully setup Xamarin for iOS development.
    Screen Shot 2017-06-29 at 10.31.28 PM.png

Installation Test: Xamarin Android

  1. Right click on Android project (XamInstall.Droid), click on Set As Startup Project. Android project name will be bold now.Screen Shot 2017-06-29 at 10.31.44 PM.png
  2. Click Run button. It will takes some time for first time build.Screen Shot 2017-06-29 at 10.32.27 PM.png
  3. Visual Studio will build the solution and deploy to Android Emulator. If you can see this, it means that you have successfully setup Xamarin for Android development.Screen Shot 2017-06-29 at 10.34.31 PM.png

Additional

After the new project is created, you will notice that NuGet packages in solution is outdated. Android Support Library is only version 23.3.0. The latest available version is already 25.3.1. Please update the packages in all project before you continue to work on the solution.

Setup and Install Xamarin for Visual Studio 2017

  1. Download Visual Studio 2017 installer from visualstudio.com and RUN it.
    vs01.png
  2. You will need to Agree to the terms of Microsoft on the first start of Visual Studio 2017 installer.
    vs02.png
  3. Then wait for the initialization of the installer.
    vs03.png
  4. After initialization is completed, you should see the following screen. Under Mobile & Gaming category, select Mobile development with .NET component. Then click Install button to start the installation.
    vs04.png
  5. Visual Studio 2017 installer will start installation and it took about 30minutes to complete in my machine. (Very fast compare to Visual Studio 2015)
    vs05.png
  6. When the installation is completed, you will see the following screen. Just click on Launch button to start Visual Studio 2017.
    vs06.png
  7. Visual Studio 2017 is now installed with Xamarin and ready to rock.vs07.png
  8. Surprisingly the latest Visual Studio 2017 installer did not give any installation problem this time. Everything is installed correctly and the process is so smooth. Thumbs up for Microsoft and Xamarin team.
  9. If you need to setup Android Emulator, please refer to this POST.
  10. If you need to setup connection to Mac, please refer to this POST.

Setup and Install Xamarin for Visual Studio 2015: Xamarin Mac Agent

Setup Visual Studio Connection To Mac

In order to build and debug iOS project in Visual Studio, we need to configure Visual Studio to connect to a Mac machine in network or Mac in cloud.

  1. We need to setup the Mac first to allow the connection. Open Spotlight (Cmd-Space) and search for Remote Login and then select the Sharing result. This will open the System Preferences at the Sharing panel.
    mac03.png
  2. Tick the Remote Login option in the Service list on the left in order to allow Xamarin for Visual Studio to connect to the Mac. Make sure that Remote Login is set to allow access for All users, or that your Mac username or group is included in the list of allowed users in the list on the right. The Mac should now be discoverable by Visual Studio if it’s on the same network.
    mac04.png
  3. Back to Windows and open Visual Studio. Go to Tools>iOS>Xamarin Mac Agentmac01.png
  4. If the Mac is not setup correctly, you will see the following dialog. You can try to add the Mac manually by clicking the Add Mac button and put in IP address of the Mac. If it is not able to connect, you will need to check the setup in Mac. You can also try ssh to the Mac to test the connection between Visual Studio and Mac.
    mac02.png
  5. If there is a Mac setup correctly, you should able to see the Mac showing in the list. You can now select the Mac and click on Connect button.mac05.png
  6. If the connection is successful, you will see a dialog prompt ask for credentials. Please input the username and password that you have configure for Remote Login in the Mac.
    mac06.png
  7. If the credentials is correct, you should be now connected to the Mac.
    mac08.png
  8. Close the dialog and you should be able to Build and Run iOS project now.
  9. Note: Please make sure that both Windows and Mac is having same version of Xamarin in order for the connection to work.

 

You can find the other parts of the guide here: