My first Solid app

#1

It’s been a bit of an uphill battle but I’ve made my first Solid app, which you can view here: https://dvo.github.io/profile/index.html. BTW, if you log in, a folder is created in your public folder called DVO. You can edit your vcard info from the front-end. Also, you can add friends now (there was a bug but i fixed it). However, I haven’t yet figured out how to unfriend anyone.

There’s a lot of work that still needs to be done, but the goal is to be able to offer people a free resume/CV (as a starting point). Here is a demo profile: https://dvo.github.io/profile/profile.html?webId=https://devolution.inrupt.net/profile/card#me

You can add your own webId to view your profile.

If you try to login you will notice that the authentication process is a little clunky. For some reason the session token isn’t being saved properly, and so i had to check the url for the token manually, and then present a button saying “VIEW PROFILE”. After they click the button the session token is saved. Hmmm.

Anyway, i’m afraid to say i’ve still got a lot of questions to ask :pray:

Once i’m further down the line and I’ve refactored the code, I’ll do write up (and maybe even a video) to explain to noobs like me how to build a Solid app :wink:

EDIT: There’s a few extra buttons on the signup page,which are for testing. Ignore the “send token” button. This sends a token to a chrome extension (another project i’m working on).

10 Likes
#2

Nice one Glen. I’m unable to get past the initial screen after clicking around, probably one the wrong things - how do I login?

Anyway, good to see you making progress.

#3

Did you go to this page? https://dvo1.github.io/profile/index.html. You should be able to select a provider and login (green button). Or did that not work?

As mentioned the process is a bit clunky. For example, after being redirected back to the page, you need to click the ‘VIEW PROFILE’ button in order to store the session variable. Although I could probably do this automatically. It’s a bit weird though.

1 Like
#4

Green button does not work on my mobile device too. But I’ve your Devolution video, and I think you must be interested to @happybeing work that has port Solid on Safenetwork :wink:

2 Likes
#5

Ah right. I haven’t even thought about making it work for mobile yet. I’ve tested it on chrome and Brave and that’s it. I’ll look into it. Thanks :wink:

#6

I noticed that the buttons were working, until any kind of solid-auth-client statements were executed. Then it hangs. So i tried to login to https://otto-aa.github.io/solid-filemanager/ on mobile and experienced the same issue. Is anyone else able to login to this app on mobile?

Anyway, I’ll try some more apps in the morning.

#7

Very nice work!

1 Like
#8

@happybeing Are you able to login to your Solid plume blog on mobile? After scouring the forum for examples of apps to test, I couldn’t get any of them to work on my phone. I also tried plume (https://thewebalyst.solid.community/plume). When i clicked on the inrupt button in the popup, nothing happened. Could this be an issue with solid-auth-client? That’s what seems to be causing it to hang.

#9

Ok, I got it , with chrome on Android

Screenshot_20200428-094352_Chrome
Screenshot_20200428-094352_Chrome720×1280 187 KB

Nice first shot :+1: in just 2 days :clinking_glasses:

2 Likes
#10

I was using Firefox on Android (tablet).

Seeing Chrome was ok for @Smag0 I tried DuckDuckGo browser and that worked. So I then went to Firefox again and now that worked too. :thinking:

Did you change anything or is this unexplained?

Anyway, now I’m in it is very nice indeed :clap:

#11

OK that’s great :slight_smile: I changed a couple of things. I changed some code that was randomly selecting a service provider from the list, and i added touchstart to the event handler e.g. $('#submit').on('click touchstart'.... i’m not 100% sure which one (if any) was causing the problem. I’m still not able to get it working my mobile or Edge browser. Anyway, its a start :wink:

EDIT: Ah, there was one other thing too…I was using a chrome specific api, so I wrapped it in a try/catch statement. e.g. let port = chrome.runtime.connect(laserExtensionId);. That would probably explain why it didn’t work on FF.

1 Like
#12

Great work @glensimister!!! Congrats for its development :slight_smile:

What about to talk about this app in the next Solid World event taking place next May, 7th? :wink:

Some feedback:

  • Choose a custom Pod provider should be great feature (being able to choose to store your data wherever you want). We’re also trying to implement the feature into Ohmypod! app
  • I have more friends than the listed ones. Not sure why only app shows 5 (is it configured by default number?)
  • When you mention ‘unfriend’ are you referring to ‘Delete’ it from your list?
#13

I have a Solid Plume blog deployed into my Pod, and I can confirm to you that I’m able to see it on my mobile (Android & using Chrome browser):

image
image590×1280 93 KB

Also I take the opportunity to announce that we’ve improved the responsive designs of our Ohmypod! app

Some examples:

image
image590×1280 75.6 KB

image
image590×1280 84.8 KB

3 Likes
#14

@glensimister With regards the “doesn’t work in Edge” issue, I assume you are referring to the old EdgeHTML version of Edge. As Microsoft are replacing the old version with the new version based on Chromium (https://www.microsoft.com/en-us/edge), I would recommend testing your app using that. I have been using it on Windows and Mac(!) for several months and have found it reliable with all apps that work in other browsers working correctly. There are even a few reasons I prefer it to Chrome.

1 Like
#15

Thanks! Yeh i’d be happy to talk about the app. I’m still a noob, so i’ll probably listen more than talk :wink:

Regarding the friends issue. I fixed it (kind of). You now have about 12 friends. Does sound about right? The problem was that some of the webId’s were non-standard. For now, I threw in a try/catch to skip the ones causing an issue. But i’ll need to look deeper into it to show the non-standard ones too.

Yeh, I wasn’t able to delete a friend. I was trying something along the lines of me.friends.delete(friendId)

I probably need to loop through the list, find a match and delete it. I had a go but wasn’t successful. BTW I also fixed a bug that was preventing people from adding friends. I’ll need to add some kind of confirmation. Lots to do…:slight_smile:

1 Like
#16

Ah right. Yeh i tested it using a pre-historic version that was lying around on my desktop :slight_smile:

#17

Great It works for me!

1 Like
#18

This is great. I just stumbled across Darcy. I changed the folder path in my app and i was able to pull the posts in. I wasn’t able to display the images though. The posts have a .post file extension. Could this be changed to .html? That way they would be more interoperable with other apps. Also, it means that people can edit the files in their POD. Who’s behind Darcy BTW? Nada?

Anyway, i’m going to look around to see what other apps i can use. If anyone has any suggestions please let me know. We have DVO, Darcy, Salut, a chat app (I saw one somewhere), Pixolid, a mailbox? It all just needs to be stitched together and we have a full-blown social media platform. Could we use a browser extension for a single-sign on?