How I did computer control from the phone

image



It so happened that I was free from work. On the other hand, I’m not used to sitting idle, but I have long wanted to try something new.

I did not have to think long, since I have been following the development of Flutter for a long time. I was not involved in mobile development before that at all, so it was doubly interesting to check myself - wasn’t I completely numb as a developer. Well, it’s clear that the article is designed for the same “dummies” as I do. There will be no examples and analysis of specific code, but rather a description of general impressions.



Since for me the best way to learn a language or a new technology is to create a small but complete application, then I started by setting the task.



Formulation of the problem



I have long wanted to have an application on my phone that runs something on a computer. A kind of control panel, when you do not need to switch between programs, move the mouse in search of the menu and perform other actions. An additional screen with buttons would definitely not hurt me.



It’s immediately clear that you can’t do with one phone, you need to make a server application for the computer. Since I’m doing it for myself, you can use a test file with a list of running commands that will be displayed on the phone in the form of buttons. There was no hesitation with the development language, since I recently wrote on Go and it is very well suited for this task.



So, on the phone we have two pages - a login and a list of buttons. On the computer - the simplest web server that loads buttons at startup, returns a list one at a time, and otherwise executes the desired command. For simplicity, you can make one assumption - the phone via wi-fi must be connected to the same network as the computer.



And of course, everything should be open source (links at the end), so that interested people have something to criticize.



Flutter



Since the server side was not difficult, I decided to start with Flutter. If there are difficulties, then you won’t have to write anything on Go either. Installing Flutter went without surprises, although I still had to install Android Studio. Since I use Visual Code, I also installed additional extensions there. When creating a project, Flutter does not create an empty project, but a program of the Hello, world level, which, if desired, can be launched immediately. The question is how to watch it. I tried three ways



  1. Create an emulator in Android Studio . If the computer is not powerful, then there is only one plus - you can select the desired phone model. On my i5 c 8 GB of memory and ssd, working with the emulator brought me some mental anguish. So I started looking for alternatives.
  2. Chrome Since Flutter can compile the program in js and html, I decided to use this option. To do this, I really had to switch from a stable branch to master (in stable there is no web support), but the start began to go much faster. The downside is that some mobile features do not work and the appearance itself is slightly different, for example, in fonts, but it is quite suitable for rough work on the application.
  3. Own telephone . A great method is to turn on the developer mode on the phone and connect the mobile phone to the computer. Pros - the lack of brakes and the "physical" work with the application, cons - a constant mode of charging the phone.


As you know, Flutter uses the Dart programming language. I will not say that this is an outstanding language, but Google apparently decided that the good would not disappear and gave it a second chance. There was no time to teach him, so I did not teach him. I simply adhered to the following principle, if something is not clear in the example whose fragment I want to use, then this needs to be understood. It seems that you don’t specifically learn the language, but the overall picture is taking shape. At least, what is the difference between final and const , and what is a ?? b , I now know.



Flutter has a so-called hot reload, when the application is running, pressing r - updates the current state, R - starts the application again. The thing is great, but with her I had the only serious stupor. When updating the current state,

the data is not updated, this may not be correctly said, but the conclusion is the following, if something goes wrong, it is better to restart the application than puzzle over the cause. This discovery cost me many minutes.



When both debug and release versions are launched on the phone, flutter installs apk files on it. That is, you can run some kind of example once, and then, if necessary, run it on the phone without opening the corresponding project.



I did not bother with the interface part. There was an idea to give the opportunity to group buttons and add switching between groups, but decided that for the first version a simpler functionality was enough ... In general, the following happened.



image



The release was collected in accordance with official documentation. The only thing they could immediately warn about is the change of the package name com.example. *, Since the Play Store refuses to accept packages with such names.



Go server



There is even nothing to tell about the desktop part. I connected a package for working with YAML format, a package for logging, and did not even bother with a web server, but took a ready-made web framework. Since the project was created more for personal use, and with GUI interfaces things are not very good, I decided to limit myself to defining all the buttons in the configuration file. The only required field for a button is the name of the application to be launched. In addition, of course, you can also define command line parameters, icon, title, etc.



While writing this article, I realized that the security issue was not worked out to the end, but at least there is a binding based on a password and / or a unique identifier for the device. For the local network, in my opinion, it’s enough, but to manage the remote server using the hack in the form as it is now, I would not risk it.



Deployment



When the development is finished and everything works like this, the next step is to publish to the PlayStore.







There were fears that the application might be rejected, but it was still worth trying to accommodate. The easiest step was to register and pay the entry fee. Everything else required a certain thought process, but there was nothing super complicated. As a rule, there were enough instructions and tips. In the beginning, I made a test version, a day later I translated it publicly, and a day later it was approved.



Conclusion



Flutter does not require in-depth study to create a simple application. The documentation is quite extensive and you can always find ready-made examples and articles on the Internet. The desire to work with Flutter remains, if a new idea arises, I will study it further.



Creating documentation, releasing a release, and posting it on the Play Store, as well as writing this article, required a time comparable to development.



Sources: GitHub



All Articles