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
- Start the Termux environment
- Installation node, python, libllvm, clang
- Download code-server ARM64 and decompress it
- Process compatible, delete node_modules, and reinstall yarn install
- 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, mainly
npm install
Pulled 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
- Start the Termux environment
- Install the node
- Download code-server ARM64 and decompress it
- 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
- Start the Termux environment
- Download and install full Linux(30m)
- Download code- Server ARM64
- 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.