Nextcloud App Development Tutorials: 1 step closer to creating an app!

Originally published at: Nextcloud App Development Tutorials: 1 step closer to creating an app! - Nextcloud

Does it :sparkles: excite :sparkles: you when new Nextcloud Apps come out?

Perhaps the Cookbook app brought you joy to store all your favorite recipes, or the Bookmarks app helped you organize your favorite websites.

But what if you have 💡the best idea 💡 for an app that would help you and others, but nobody has done it yet?

What if we told you YOU could develop one yourself?

Well, we are happy to announce that we now offer Nextcloud App development tutorials!

Nextcloud App development tutorials

It’s hard to get into the coding world sometimes even with all the information out there.

Tutorials offered online are often very hard and stressful to follow and leave you feeling defeated and disappointed.

We are offering a different approach.

Our tutorials are:

  • Written in a language that does not assume pre-knowledge
  • Meant to enable any developer who wants to enter into the world of Nextcloud
  • Tested by someone who is not a developer, to ensure the tutorials are easy to follow

So if you lack extensive coding experience or are hesitant to start, we are providing you with all the guidance, instructions and support you need in these new tutorials.

What’s inside?

In the Nextcloud folder – Nextcloud app development tutorials final – we are providing tutorials for:

  • Setting up a development environment
    • Tutorial for Mac
    • Tutorial for Ubuntu
  • Developing a simple files plugin

More coming soon!

We love to support our community

We really want to provide our community members the best experience possible, especially if it’s their first attempt at a Nextcloud coding project! Our goal is that these tutorials put you at ease and help flatten the learning curve.

See what some participants have already said about our development tutorials:

“Great job! This is certainly a much better experience than I had bootstrapping my first app back then. Very approachable 👍.”

– theCalcaholic , NextcloudPi Developer

“Thank you so much. This is really very helpful for me. I am looking forward to further tutorials.”

– olheem

Already an expert?

Help the next generation of #Nextcloud app developers and contribute to this project!

We need:

  • Create tutorials about setting up a development environment in the same format for other operating systems
  • Help with answering the questions that arrive on the forum posts [1] [2]
8 Likes

I once maintained an extension (grauphel, to sync notes between tomboy on PC, Android and N900) but stopped eventually because every new major Nextcloud version brought API breakages that required me to adjust my app.

This meant I had to do unnecessary work every six months just to keep the app installing on the latest release, although the app itself was feature-complete years ago.
The ChangeLog was pretty sad: For several years, it only contained entries “Make compatible with Nextcloud X”.

In the end I would have had much less problems and unnecessary work if I had written a standalone web application instead of a Nextcloud app.

3 Likes

so just to confirm I understand, the issue was that the API was changed too frequently? Can you give an example of how a change in the api broke your app?

Generally I agree with your point though, I’m worried about this as well.

2 Likes

API breakages that had effect on my grauphel app:

  • NextCloud 14: class \OCP\Util was dropped that I used
  • NextCloud 15:
    • Display broke because “There may not be any element between navigation and content.” in HTML (I had a script tag there)
    • CSS files must be registered via API now, JS files as well
  • NextCloud 16: Release a new version without any changes because the max-version needs to be updated
  • NextCloud 17: Release a new version without any changes because the max-version needs to be updated
  • NextCloud 18: Release a new version without any changes because the max-version needs to be updated
  • NextCloud 19: ILIKE SQL condition changed, broke search
  • NextCloud 20:
    • my Javascript broke because OC.search JS variable was not defined anymore in some circumstances
    • the “Unified search API” completely changed. Even the new maintainer has not re-implemented this, so the app has no search since this version.

Then I gave up.

3 Likes

thanks a lot for taking the time to write this detailed reply. I’ll address the concerns to the engineering leads and see what the reasoning for it was and if we can do better in the future.

4 Likes

Hi there,
I sat down with the team leads to reflect on this and it resulted in an improved process for documentation, for which I started a new thread.

Update: we now also have a tutorial available for Windows and we also have a video tutorial for setting up your development environment on Mac!

1 Like

I’ve started created my own app following this tutorial. I downloaded the app’s skeleton and create a simple VueJS app here: GitHub - Lucy781228/Custom-App
I only used one component which is NavBar.vue. I enabled my app, but nothing appeared when I click on the button on the navigation. I created a new <div> on /templates/main.php and only that <div> worked.
P.S: Please ignore other .vue files, mixins folder and other Controllers (except PageController.php)

1 Like

Another problem is that the newest doku on Nextcloud is from Nextcloud 19 whereas the version the most users download and the app.skeletton is now version 26? Seems a lot things changed, doku no longer fits on actual version.
Would be also nice to have a simple ‘hello world’ example on github, cause on my tries, only the side menu seems to shows up, the main page shows only text, when minimized.
Is it that the new main page needs to be defined only on vue.js now and then compiled on every change?
The tut-video is a ‘do this and do that’, but lacks explaination why.

hey! have you checked also the written tutorials that the youtube video links to?
these have the tutorials that you are looking for with detailed explanations.

See Overview of all tutorials - #2 and Nextcloud

1 Like

Yes they explain more. Seems also there is now a ‘latest’ and 25 doku, great!

1 Like

@Daphne Before starting can I ask you guys something? I have no background in Vue, and I am a svelte and nodejs developer, do I need to learn Vue or is there a chance for me to contribute in svelte to Nextcloud?

hey @Amanuel_Elhanan ! With your nodejs knowledge I’m sure your contributions would be very valuable. Think about small issue they get when using Nextcloud, it can be in the core or in an app you like. If you can find a small issue, you can start by reporting it and then try to fix it, and then also check if some GitHub issues mention a planned feature or fix and start to discuss it and potentially make a PR as well. I think you would also be interested in the tutorials.