Note that this discussion is not based on PC. This was made in early September. I have been using it and haven’t had time to share it.

background

Vs Code is mostly written by TS, and the upper UI can run in browsers of various systems, but VS Code is based on the Electron framework, which provides support for Node and some apis that the JS engine in the browser kernel does not have, such as I/O, Some interaction of the system kernel. Code-server solves the problem of leaving electron. There is a software called AID Learing on Android, which comes with VS Code. The principle is similar. It is not VS Code that opens Linux GUI, but also webView that connects to local services. The entire download and installation will kill 6 gigabytes.

Client framework

The client was developed using Flutter, and the framework was chosen not for cross-purposes, but for quick trial and use of basic capabilities.

Analysis of implementation method

Code-server is arm64 architecture in github release, the whole download, open terminal decompress execution, this is arm64, and has an ARM64 node, but is prepared for the full Linux. That is, node hardcodes /usr/lib, and the included node_modules has plenty of paths to Linux-specific nodes that aren’t available on Android. Libllvm GCC nodejs is also available in termux. Delete node_mudules and install it manually. So the whole process falls into two categories.

Initial solution: Incomplete Linux

  1. Start the Termux environment
  2. Installation node, python, libllvm, clang
  3. Download code-server ARM64 and decompress it
  4. Process compatible, delete node_modules, and reinstall yarn install
  5. Run bin/code-server to start the service

After some testing, there are some problems with this model.

  • Download too much dependence, since the source is on my personal server, will be down for a long time.
  • The compilation took a long time. GCC compilation was invoked during yarn install. The whole process took a long time.
  • – Vs Code startup does not use search code (normally supported)
  • Disk occupation is too large, a burst of operation down, direct 1.6G disk space to dry out, mainlynpm installPulled a lot of stuff, and made a bunch of caches, node_modules, heavier than a black hole.

However, node_modules in code-server is already available in Android ARM64 after following the above process. The process can be simplified as follows

  1. Start the Termux environment
  2. Install the node
  3. Download code-server ARM64 and decompress it
  4. Perform bin/code – server

However, there will still be a bug that the editor can not search the code. Although node is only 20m, it is still in the personal server, the downlink bandwidth is 5MB, about 700KB /s, EMMM, if you want to integrate into apK, you have to integrate deb, adjust DPKG to install, give up.

Finally use scheme: full Linux

  1. Start the Termux environment
  2. Download and install full Linux(30m)
  3. Download code- Server ARM64
  4. Run bin/code-server to start the service

In the end, the full Linux approach was chosen, with smaller installation size, full source support, exception bug avoidance, and so on. Since the entire VS Code startup required 130MB of memory is the first time to open, so it is not meaningful to put the occupied memory on the server, and then download it by app. Finally, all the memory was integrated into APK as resource files.

The specific implementation

Start the Termux environment

This process already has wheels. You just need to compile a bootstrap and integrate it into APK according to the compilation script of Termux-Package, start the app to decompress it, and then restore it according to the symbolic link format. The terminal is termare_view.

Bootstrap is a Linux-like environment with minimal dependencies, such as bash,apt, etc.

Concrete implementation code

function initApp() {cd ${RuntimeEnvir.usrPath}/
  echoPrepare symbolic links...for line in `cat SYMLINKS.txt`
  do
    OLD_IFS="\$IFS"
    IFS="Please"
    arr=(\$line)
    IFS="\$OLD_IFS"
    ln -s \${arr[0]} \${arr[3]}
  done
  rm -rf SYMLINKS.txt
  TMPDIR=/data/data/com.nightmare.termare/files/usr/tmp
  filename=bootstrap
  rm -rf "\$TMPDIR/\$filename*"
  rm -rf "\$TMPDIR/*"
  chmod -R 0777 ${RuntimeEnvir.binPath}/*
  chmod -R 0777 ${RuntimeEnvir.usrPath}/lib/* 2>/dev/null
  chmod -R 0777 ${RuntimeEnvir.usrPath}/libexec/* 2>/dev/null
  apt update
  rm -rf $lockFile
  export LD_PRELOAD=${RuntimeEnvir.usrPath}/lib/libtermux-exec.so
  install_vs_code
  start_vs_code
  bash
}
Copy the code

RuntimeEnvir usrPath is/data/data / $package/files/usr/bin

Install complete Linux and code-Server

Atlio is open source and relies on Python. The requirement. TXT file is required to execute python -r requirement. Then I switched to Proot-distro, pure shell, so I just needed to integrate it directly into APK.

1. Install ubuntu

install_ubuntu() {cd~ colorEcho - Install Ubuntu Linux unzip proot-distro. Zip >/dev/null#cd ~/proot-distro
  bash ./install.sh
  apt-get install -y proot
  proot-distro install ubuntu
  echo '$source' > $ubuntuPath/etc/apt/sources.list
}
Copy the code

2. Install code – server

install_vs_code() {if [ ! -d "$ubuntuPath/home/code-server-$version-linux-arm64" ];then
    cd $ubuntuPathVs Code Arm64 tar ZXVF ~/code-server-$version-linux-arm64.tar.gz >/dev/null
    cd code-server-$version-linux-arm64
  fi
}
Copy the code

Startup code – server

Just start it with Proot-distro. It’s so convenient

— Termux-home parameter: The home that opens the app sandbox is mounted to Ubuntu /root so that Ubuntu can use the folder inside the app.

start_vs_code(){
  install_vs_code
  mkdir -p $ubuntuPath/root/.config/code-server 2>/dev/null
  echo 'bind-addr: 0.0.0.0:8080 auth: none password: none cert: false' > $ubuntuPath/root/.config/code-server/config.yaml
  echo -e "\x1b[31m- Starting..\x1b[0m"
  proot-distro login ubuntu -- /home/code-server-$version-linux-arm64/bin/code-server
}
Copy the code

In fact, the whole implementation is actually not difficult, all are some shell scripts, also thanks to the previous Termare series support, interested can take a look at the organization. Then it is the process of opening webView, if you feel that the performance is not good, you can use a LAN computer to connect. Take a look at the non-first startup process

WebView implementation scheme

First of all, I went to pub to have a look at the webview plug-in. The official Webview that is currently being maintained has such a hint

  • Hybrid composition mode has a built-in keyboard support while Virtual displays mode has multiple keyboard issues
  • Hybrid composition mode requires Android SKD 19+ while Virtual displays mode requires Android SDK 20+
  • Hybrid composition mode has performence limitations when working on Android versions prior to Android 10 while Virtual displays is performant on all supported Android versions

This means that with Hybird enabled, the performance of Android 10 is limited, but with virtual display, the keyboard can be a lot of problems.

In practice, the OTG-connected keyboard was basically unusable.

After analyzing the scene again, I still use the native WebView, and there are some holes here.

Must enable item

        WebSettings mWebSettings = mWebView.getSettings();
        // JS is allowed
        mWebSettings.setJavaScriptEnabled(true);
        mWebSettings.setJavaScriptCanOpenWindowsAutomatically(true);
        mWebSettings.setUseWideViewPort(true);
        mWebSettings.setAllowFileAccess(true);
        // The following line is not acceptable
        mWebSettings.setDomStorageEnabled(true);
        mWebSettings.setDatabaseEnabled(true);
        mWebSettings.setAppCacheEnabled(true);
        mWebSettings.setLoadWithOverviewMode(true);
        mWebSettings.setDefaultTextEncodingName("utf-8");
        mWebSettings.setLoadsImagesAutomatically(true);
        mWebSettings.setSupportMultipleWindows(true);
Copy the code

Route redirection

In some scenarios VS Code will open a new window, for example, when file -> New Window is clicked, the WebView will call up the system’s browser.

        // The system will open the web page through the mobile browser by default, in order to directly display the web page through the WebView, must be set
        mWebView.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                // Use WebView to load display URL
                view.loadUrl(url);
                / / return true
                return true; }});Copy the code

Normal Browser login

For example, the terminal output XXX. XXX, CTRL + mouse click, is expected to open the browser.


mWebView.setWebChromeClient(webChromeClient);
WebChromeClient webChromeClient = new WebChromeClient() {

        @Override
        public boolean onCreateWindow(WebView view, boolean isDialog, boolean isUserGesture, Message resultMsg) {
            WebView childView = new WebView(context);//Parent WebView cannot host it's own popup window.
            childView.setBackgroundColor(Color.GREEN);
            childView.setWebViewClient(new WebViewClient() {
                @Override
                public boolean shouldOverrideUrlLoading(WebView view, String url) {
                    context.startActivity(new Intent(Intent.ACTION_VIEW, Uri.parse(url)));
                    return true; }}); WebView.WebViewTransport transport = (WebView.WebViewTransport) resultMsg.obj; transport.setWebView(childView);//setWebView and getWebView methods
            resultMsg.sendToTarget();
            return true; }};Copy the code

Feasibility exploration

What does this do? Why connect to android when you can use VsCode on your PC with such a small screen?

  • There is a VS Code plus a full Linux environment that can cover some scenarios except android development etc.
  • For those of you who develop programs to arm boards, you still have to make a bunch of cross-compilation tool chains on your PC, and the debugging process of each compilation is also very tedious. Now you can write locally and compile locally.

Coincidentally, bought a tablet, iQiyi, but also as a programmer of productivity.

Compiling C

I chose a project that I have been studying, SCRCPy, a pile of C source code, and finally compiled it smoothly.

Web development

Mobile web debugging has always been a problem, as a wild way of front end I also feel helpless, generally add some vConsole components to get debug logs.

This is what the mobile Web used to do for personal projects

Now, we can develop locally, debug locally, have node the whole front end and most of the projects can be pulled down, real mobile physical environment. Have a try

Writing a blog

This article was written entirely in this Android version of VS Code, using hexo native mode

Written document

Write background, interface test

Write some simple backend, such as Python fastAPI, Flask, and test the interface through the REST Client

The last

In order to let other users can directly use this app, I put it on kuan.

Both vscodium and code-Server are MIT open source licenses. If there is any infringement, please remind me in the comments section.

Code FA 下载 address

Code FA personal server download address

Personal software quick download address

Open source address

Feel free to play, there are questions in the comment area, feel good to a star, good article to a thumbs-up, 🤔

The dart Runtime crash is caused by the ability to write code with Flutter for web.