Mobile app (including taking pictures)

[AuHau]

Hey there!

I am using md-notes for note taking in school and sometimes I would really like to include photo of a slide. The drag&drop images into note is nice feature, but the process of taking the photo with my phone and then sending it to my computer is really uncomfortable and long.

I would therefore suggest to create a very simple mobile app, which would be just for taking pictures and uploading them on server. I imagine that it would work as follow.
User would login to the app (#6 will be needed for that), then would take the picture, choose to which note should be the picture associated with and upload the picture to server. After the picture is uploaded to server, the picture would appear in floating box next to the code window, so the user could place the photo into note. This would require to implement two-ways communication so the client side could be noticed about the new photos uploaded. I guess websockets would be in place for that...

What do you think about this idea?

[AuHau]

Hey there @nicbou !

So since the ApiKey is implemented, I would like to continue with this feature and again I would like to discuss it before I start to work on it.

My idea of the functionality is as follow. There would be simple mobile app, which would basically just enable to Log-in (to retrieve the ApiKey) and take, choose or share pictures. When picture would be shared and uploaded to server, there would appear small floating box in the web editor with all unassigned pictures. Therefore the Image model would be expanded with key to User and when the Image would not have assigned Note it would be displayed in the floating box, until User would assign it to some Note. The best would be if it would be possible to place the picture with drag&drop inside to the Markdown flow, but I guess it might be quiet problematic thanks to CodeMirror. In that case, I would fall back to just simple click on picture, which would past a MD code for the image into the start/end of the file (as the current Image pasting works).

And what is my idea of the implementation? Firstly I want to use Websockets for notification of the Web application, when new picture is uploaded to server. On Frontend I want to use well-known library Socket.IO for that. On Backend with the Django, there is quiet new method called Channels, which I would use. Implementing this will also open doors for more advanced cross editor instances synchronization and more.
For the mobile application, I would like to try to implement it using Cordova, so we could easily reach different platforms. I did small research and all the functionality should be possible to implement it. There is way for sharing photos with the app (SO) and there is also Camera plugin.
Firstly I would target Android because it will be most easy for me. Then I would try to make it work also on iOS, but because I don't have any iOS devices, nor Mac, I would have to borrow for some friends... So the iOS version might take longer time...

What do you think? 😄

[AuHau]

Hey there,

so small update. I did further research on Cordova and got more familiar with it. Originally I wanted to create new repo for the mobile app and develop it from scratch, but I actually think that it is wrong approach. Since the frontend is written in Angular, it would be super convenient to simply reuse that code-base of the web editor also for the mobile app, which would result in having around 75% of the mobile app done in "10 seconds" with all the features the current editor has. Of course it will need bit of tweaking (for example adding local storage for the offline support etc.), but I don't really see any major issues! Actually if these issues will be resolved, not much prevents from using the same code-base with Electron and having desktop app out more or less in "no-time".

There is only one thing - in the beginning I would make the mobile app read-only, because fully-writable mobile app will increase priority of supporting cross-editor instances synchronization (same as #23 ). I think that implementing that will be needed especially with the desktop app, because you will have to solve conflicts from times when the desktop app will be offline. Actually I think it should not be that hard to implement, because we are not really assuming collaborative editing, rather simple text synchronization. With bit of Googling I found that there are quiet some libraries out in Internet which implements rather complex algorithms, which could be used for this. Well but that problem will needs more research, when started to be taken care of anyway.

So what I am proposing is to add an new folder mobile, where the mobile specific files will be and where also the folder build will be, and where will be copied out all the frontend code including all libraries (so basically everything except the data is already packed in the app, so the Internet communication would be as small as possible). I am currently creating gulp tasks for this, so it would be automatic. Also I will add all the dependencies to bower.json, if you want to keep the current loading of angular and some other components from CDNs on the web deployemnt, that is no problem (just when updating versions, it will have to be changed on both places).

Alright, I guess that is all from me for now 😃

Take care!
Adam