Plane, what is it, is it the big metal flying machine in the skies? Well normally this would be correct, but in this instance it’s something completely different. Plane which can be found at plane.so is an open source Project Management tool that is designed for a software development aspect to manage Issues, Sprints and Product Roadmaps with peace of mind (borrowed from their website). This is a new platform that we are currently trying out at Tokonatsu, and a couple of days ago (8th Feb 2024) or something like that I was informed that this platform doesn’t have an app-store ready app yet, but you can build the work in progress one from their Github.

Part of why I decided to try to do this was that I was discussing with Colin Barker (Colin was the one that invited me to try the platform, which is self-hosted, and about the github repository for the mobile up) about the mobile app and how the documentation provided was a bit unclear in regards to the steps required to get the app built and running either in a simulator or on a physical device.

Requirements

So in order to get the Plane Mobile app running there is a number of requirements you need to make sure you have setup and installed ready to go. The steps that I am taking are for a Macbook Pro development machine (running macOS ventura (13.6.1) with Dual-Core Intel i5 and 16GB of LPDDR3 Ram) with an iPhone 8 running iOS 16.7.5, Different development platforms and devices may have slightly different steps to take in order to get setup.

Why did I provide a detailed spec of my develoment machine, well one of the tools required in order to run this is something called Flutter, and the specs I’ve provided were considered the middle ground (Minimum CPU wise, recommended RAM wise) which was quite a shock to see when I first saw these recommendations on Flutters document website (docs.flutter.dev/get-started). It also requires a minimum of macOS 10.15 (Catalina) or later and uses zsh as the default shell.

Before going much further here is the list of requirements:

For MacOS

  • Git
  • XCode
  • Homebrew
  • JDK
  • Flutter
  • Dart
  • Cocoapods
  • Visual Studio Code (Mainly for it’s Flutter Extension, it made getting flutter working much easier)

For Windows

  • JDK
  • Flutter SDK
  • Dart SDK
  • Android Studio

I will only be going through the steps for MacOS, but if you would like to see a Windows version of these instructions, please let me know!

For XCode it’s the simple process of going to the Apple App Store and downloading and installing it from there, follow the onscreen instructions and you can’t go to far wrong. Additional setup will be covered when we’re setting up the app for building.

Homebrew installation, visit their website (brew.sh)brew.sh and there is the latest installation instruction for homebrew. I would always recommend following the instructions from the tools respective websites as these will be the latest versions of instructions.

For Flutter and Dart, we will be using Visual Studio Code to install these two SDKs. Firstly, open up Visual Studio Code and then navigate to the Extensions Tab. You will then want to search for the Flutter Extension (At the time of writing this, it was just called Flutter in the extensions list) and install this.

Once installed, you will then want to open up the Command Palette, Command + Shift + P and type flutter. You will then want to select Flutter: New Project (Don’t worry, we won’t be starting a new Project, this will trigger the installation steps for the SDKs)

VSCode will then ask you to locate the Flutter SDK, if you have it already downloaded select the path, though for safety purposes I would go ahead and click on Download SDK, this will then open up a dialog window asking where you would like to put the folder, we would consider ~/development/ but for me I put it in ~/programming/ instead because that’s the folder I already has available to me, then finally click on Clone Flutter.

This will take some minutes to complete, and then once installing it will open up the Output window in VS Code to let you know the installation process and where it’s currently at.

It will run some health-checks using flutter docker -v, this output you can ignore. In order to start using Flutter, you will need to close down all terminal windows (inside and outside of VSCode) and restart VSCode as well.

For the platform development steps, I would recommend reading the documentation on the flutter website for setting up iOS Development and the steps you need to take for that.

Next is Cocoapods, this one was a bit trickey to do. The Default installation of Ruby on Ventura was 2.something which is a bit outdated and trying to install cocoapods with this version wasn’t working for me. So in order to resovle this I used rbenv from Homebrew to act as a Ruby Version Manager, to install it’s as easy as brew install rbenv.

Once installed I then ran the following steps: 

rbenv init
rbenv install 3.0.6 
rbenv global 3.0.6
What the above set of instructions do is initialised the Ruby Environment manager, Installs version 3.0.6 of Ruby and then sets 3.0.6 as the global ruby version. But if you were to go run ruby -v you would still have the default version installed on your Macbook at the time.

So following this you would need to update your .zshrc file (nano / vi / open ~/.zshrc) and include the following lines 

1export PATH="$HOME/.rbenv/bin:$PATH"
2eval "$(rbenv init -)"
3export PATH="$HOME/.rbenv/plugins/ruby-build/bin:$PATH"

Save and quit the file then reload the script with source ~/.zshrc

Now we can install the Cocoapods with the following:

sudo gem install cocoapods

and this should be your environment completely setup, Next getting the Plane Mobile project and getting that ready to build!

Downloading and Building the Plane-Mobile application

We are now ready to start with the Plane-Mobile application it’s self, there will be a few steps to take, and some ‘really’ moments in the process, but just bare with as these were the steps that I took in order to get it installed on my mobile device, bare in mind though that this application is still a work in progress, not everything has been completed and you may encounter some errors when trying to use the application.

Firstly we will need to do a git clone of the repository from Github, either through Visual Studio Code, a terminal window or through the github website, navigate or clone the following repository:

git clone https://github.com/makeplane/plane-mobile

making sure to do the git clone inside of your development / programming folder.

This will then pull the develop branch of the Plane Mobile application, (So far I have managed to get the Develop and fix/issues branches running on the mobile with similar steps, though fix/issues has a couple more steps to accomplish)

Once everything has been downloaded, you will want to open the plane-mobile folder within Visual Studio Code, and open up a terminal window within vsCode as well.

  • Start off with copying the .env.example file and pasting it in the same location, removing the copy.example so you are left with just .env file.
  • Within the .env file, update line 2 where it says BASE_API with the url of the plane instance you are using e.g BASE_API=https://example.plain.so Save and close
  • moving on, we will need to update the android aspect of the application (Since we’re running newer versions of software versions, if you try to build the application it will complain the Android environment is out of date even if you’re trying to build on an iOS Device)
  • In order to update the android side of things, navigate to android\app\src\main you should see a file called AndroidManifest.xml.template again you will want to copy this file and remove the .template aspect from the file name and that handles the android side of things.
  • Navigate to the ios folder, and locate the Podfile file.
  • Inside here you will need to replace the last code block with the updated codeblock shown below it, (This is if your build target is running iOS 16+) Old Code Block 
    post_install do |installer|
  installer.pods_project.targets.each do |target|
    flutter_additional_ios_build_settings(target)
  end
end
    New Code Block 
    post_install do |installer|
  installer.pods_project.targets.each do |target|
    target.build_configurations.each do |config|
      config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '16.0'
    end
    flutter_additional_ios_build_settings(target)
  end
end
  • Quickly moving steps from vscode to XCode, you will want to open up the Runner.xcodeproj file from the ios folder into Xcode.
  • Once open, in the sidebar on the Left hand side, click on the Runner at the top of the list.
  • Within the central window that opens up, select Runner under the Targets heading on the left hand side.
  • Under Signing & Capabilities you want to make sure under All that you have one of your teams selected for the signing process, What I encountered was that it tried to use a false one and failed at the signing process when building.
  • Under the Build Setting tab, you want to select All and Levels in the heading below and then search for User Script Sandboxing and you want to set this setting to No
  • While in Xcode make sure you have your physical device connected and setup ready to accept the application or the virtual simulation version, you will need to leave xcode open for the later steps to see your phone and install it upon that.
  • Going back to vscode now, within the terminal window you will need to do the following commands 
    flutter pub get
flutter pub upgrade
flutter pub clean
cd ios
pod install 
pod update
  • Once all the above commands have been done and everything is updated, finally you should then be able to run one last command to get is building and deployed onto your phone in debug state. 
    flutter run --device-timeout 60

This will ask you (if there is no physical device attached) to where you would like to have the application run, follow the instructions and it will then start building and deploying the application

Once this has been loaded onto your phone you should be able to then login using your Plane User Account and then try playing around. So far I have found that the Project List when you try to go into that doesn’t work as well as creating new issues. There may be other aspects that are currently not working.