Category: Apps

Categories
Apps Crypto

Xamarin & Metamask Mobile

NFT Gallery is going from strength to strength. One issue I have with it though is the user having to paste their Ethereum address into the wallet page. As anyone can paste any public wallet address, you can have anyones collection on your phone. So I have been thinking how to integrate Web3 tech into the app.

Web3 means cryptocurrencies, blockchain technology and the one problem is that it mostly lives in web browsers. Most people who use Ethereum access it via the Metamask browser plug in. In the mobile world you can’t really have plug ins and so Metamask exists as its own app, Metamask Mobile (or MMM for short). This lets you manage your accounts and interact with Dapps via the built in browser.

So how do you get two apps to talk to each other? The answer is deeplinks. MMM has a couple of deeplinks that allow you to trigger things in the app. One is to open a Dapp (or a website). The trick is to open a webpage in MMM, get the users Eth address and then trigger a deeplink back into your app. Luckily I know a smattering of Javascript and had played with deeplinks on a previous project.

Deep link communication loop

First of all you create a web page on an https web server. Mine is here. The gist of it is that Metamask injects a javascript object called “ethereum” into the web page and the code interacts with that. Debugging it on the desktop was quite easy but in the app, it worked slightly differently. To debug you need to build your own debug version of MMM and remotely connect from the desktop to view your javascript. I got it working though.

To call MMM and get it to run your code you do something like this in c#.

await Browser.OpenAsync($"https://metamask.app.link/dapp/www.redfivesoftware.com/Web3Metamask.htm?return=http://" + AppName);

This opens a url on the device, which opens the deeplink into the app, which in turn opens your web page in the browser tab. In this case Web3Metamask.htm. Currently I pass one parameter in which is the start of the url that calls back to my app.

Then it is simply a case of overriding the OnAppLinkRequestReceived in your App class and processing the URI that was passed back into you. 

    protected override void OnAppLinkRequestReceived(Uri uri)
    {
        Logger.Info(uri.AbsolutePath);

        string url = uri.AbsolutePath;

        var bits= url.Split("/",StringSplitOptions.RemoveEmptyEntries);

        switch (bits[0])
        {
            //{nftgallery:///address/0xce41b49d28800de3ba9925f68d82129dfc4b870b}
            case "address":
                string address = bits[1];
                App.SettingsViewModel.UserAddress = address;

                break;

            default:
                break;
        }

        base.OnAppLinkRequestReceived(uri);
    }

And now you have your eth address. In the next post I will show how to get details of NFTs from OpenSea using their API.

Categories
Apps

Dark Mode for Xamarin Apps

This week I have mostly been trying to get Dark Mode working with one of my Xamarin Forms Shell apps. This is the new feature available on most mobile OSs where the screen goes white on black (rather then black on white) to reduce glare at night. There is no “out the box” solution but after much googling and a bit of fiddling I found something that works.

There were three main changes I had to make to get it working.

  1. Modify the Shell part of the app.
  2. Modify the content of the various ContentPages.
  3. Modify the splash screen.

Starting with points 1 & 2, I referred to these two posts for their approach. Read them but bear in mind I had the following issues. The general idea is that you have two resource dictionaries, one for the light screen and one for the dark screen. The elements have the same names so you can swap them over at run time and it applies the new colours to the existing controls.

Shell & ContentPages

I am quite new to using StaticResources. Hot Reload is great as you can edit the XAML and see it update on the device. This light/dark approach means that the resources are compiled and switched at runtime. This means Hot Reload doesn’t work as the XAML doesn’t have a direct “live” link to the app. This just means you have to get it all looking nice with the XAML as part of the app or page and then copy it to the light/dark ResourceDictionary when you have finished. You might also want to separate out and DataTemplates into another ResourceDictionary that uses the other two.

I also found that this process didn’t work for the Shell objects themselves. by that I mean the UI that presents itself when the app starts up. Navigation bars and Tab bars, but not modal pages. In these cases I defined the Shell colours like this.

<Shell xmlns="http://xamarin.com/schemas/2014/forms"
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
        xmlns:views="clr-namespace:GalleryApp.Views"
        BackgroundColor="{AppThemeBinding Light=SteelBlue, Dark=Black}"
        ForegroundColor="{AppThemeBinding Light=White, Dark=White}"
        TitleColor="{AppThemeBinding Light=White, Dark=White}"
        DisabledColor="{AppThemeBinding Light=Green, Dark=Green}"
        UnselectedColor="{AppThemeBinding Light=LightGray, Dark=DarkGray}"
        FlyoutBackgroundColor="{AppThemeBinding Light=White, Dark={OnPlatform Gray, iOS=Gray, Android=LightGray, UWP=Gray}}"
        x:Class="GalleryApp.AppShell">

While in the content pages definitions it was used as

<Style TargetType="NavigationPage">
    <Setter Property="BarBackgroundColor" Value="{StaticResource NavigationPrimary}" />
    <Setter Property="BarTextColor" Value="White" />
    <Setter Property="BackgroundColor" Value="{StaticResource BackgroundColor}" />
</Style>

Also occasionally I needed a DynamicResource instead of a static one. Half a template would update and half wouldn’t. Also it pays to check ALL of your screens work.

Splash Screens

These aren’t essential but are nice to have. Especially if your existing splash screen is light and bright. For this I mainly used this blog post as a reference. It explains everything you need to know , but as I had done a splashscreen before this was fairly familiar. The only thing I had trouble with was editing the iOS storyboard. I ended up adding the ViewController in XCode rather than in Visual Studio.

Categories
Apps Uncategorized

Adventure Game Engine

Many years ago I wrote a “choose your own path” adventure game for the iPhone. Its engine was compact, simple and very flexible, even though I wrote it in an afternoon. The game was rubbish and I always thought it deserved better.

Apparently a few years later I rewrote it in .Net possibly with an eye to makeing another app for it. Anyway I think the public probably have more use for it than I do now, so I am making it freely available.

At its heart it is a bunch of “pages” with “options” that take you to other pages. You could write a simple game with just that. It also, however, has variables. These are things like flags, text and numbers. You can display these in the game (“your name is Shaun, you have 6 pickled eggs”) and you can also use them to control what text is displayed and what optiuons are available to the user. Add in the ability to randomise things and you have a game that never plays the same way twice.

Another idea is that the same game can have different front ends. You can play it in a DOS box with coloured text and keyboard input but play it on a phone (iOS and Android coming at some point) and it will be fancy coloured HTML with hyperlinks, pictures and buttons. You could probably even stick it on a web site.

Currently I am just finishing the basic functionality. This includes

  • Load
  • Save
  • Colouring text
  • “Hot reload” while editing
  • Maybe some sort of validation for game editing
Categories
Apps Uncategorized

Why I Wrote WebcomiX

I have always been into comics and computers. Webcomics are a nice combination of the two. I remember reading McClouds “Understanding Comics” and the high tech sequel “Reinventing Comics” when they first came out. Shortly after that I discovered XKCD and the rest is history.

The thing is though, that was 20 years ago and webcomics havn’t really progressed. CDs and DVDs gave way to streaming, talking to peole gave way to social media and web comics are still first/last/prev/next with a homepage that shows the latest episode. I hate to say it but any media that hasn’t advanced in 20 years is a evolutionary dead end, and that includes webcomics. And no, having a button to share it on facebook is not a major advance.

any media that hasn’t advanced in 20 years is a dead end

Me

Now some will say that “if it ain’t broke, don’t fix it”. That is fine but webcomics are broke. The main problem is reading a serial. You have a website that insists on showing you the latest episode even if you are five episodes behind. That means going back till you find the place you left off. A few webcomics let you save yours spot but not many. I am guessing this is a throwback to when the “tin foil hats” were wary of having cookies and javascript enabled on their computer. Those two technologies ARE the internet these days.

Which brings us to the second problem. There is no such thing as a standard webcomic site. Most are hand coded, some are based on wordpress and some are done through “publishers”. Where is the menu, where are the navigation buttons, can I hide ALL those comments? Some are one story, some are lots of “chapters” or “books”. When I relaunched “The Nurbs” a few years back I looked at wordpress and couldn’t even get the webcomic friendly theses to install. In the end I wrote my own. Again.

Then there are the strips themselves. Computer screens are landscape and phones are portrait. Most webcomics seem stuck in a past where it is either comic book dimensions or newspaper (3 frames) funnies dimensions. Not sure what Scott would make of that. Of course, there is no money in the webcomic as such. It is all about the kickstarter for the printed collection or getting syndicated in old media. The format is designed to suit the authors dreams.

So I am guessing the average fan has a folder in the browser bookmarks full of comics and they update the bookmarks as they read each episode. Then somehow they have to sync that with their RSS feed which tells them when new episodes are out. It is messy. It is why I wrote webcomiX.

It started off as a personal coding project which I released into the wild as I thought others may enjoy it. They did. You can browse the Library of webcomics and add the ones you like to your Favourites screen. This lets you read the comic with big clear navigation buttons, while keeping your place in serials AND notifying you when new episodes are out. What’s not to like.

I have tried to do right by the comics. I will remove it if you ask and I contacted as many of the creators as I could to tell them about the app. It shows the whole page for the comic so that should count to their advertising turnover. You see THEIR ads and THEIR shops and THEIR Patreon links. I have one ad in the app on the Favoutrites page which doesn’t make any money. Fifteen years of apps and blogs and I still have not reached Googles minimum payent requirements. At least when apple did ads I could just about break even.

Categories
Apps Uncategorized

All About The App

By the look of it, Comic Chameleon, the only other web comic app out there has called it a day. There has only really been them and WebcomiX and now they are gone.

From what I gather, they took a fairly different approach to comics than we did. They scraped the comics from the artists websites and in return promised a % of revenue. I don’t know how many active users they had but to pay themselves and 100+ comic creators must have been tricky.

One thing that we can learn from them is that if you are in the app market space, then it is ALL about the app. You can have brilliant ideas and the best of intentions but if the app isn’t front and centre then you are lost.

To begin with they started off as an iPhone only app. Not only that but they picked the wrong technology to make their app. There is no excuse for not supporting tablets these days. However when you installed it on an iPad you just got the system 2x blow up of the iPhone version. I am guessing they used one of those iOS/HTML/CSS hybrid systems that were popular in the early 10s. I am also guessing they didn’t have an in house programmer as they only did ten updates in seven years.

Then five years ago they did a Kickstarter to raise money for the Android app. Whatever tech they were using obviously wasn’t cross platform. They now had two apps to maintain and add features to. Even five years ago it would have been possibly to write an app that was both modern and cross platform, rather than a pure android one. they should have bitten the bullet.

Finally their app may have been a bit too high maintenance. Like comixology, it did the thing where you could read a comic one panel at a time. I am guessing someone spent a lot of time counting panels and adding it to the database. This also made the app a bit confusing as different things happened depending on where you swiped or tapped.

I will admit WebcomiX has got a bit lax at times. However there is a new version of iOS and Android every year that usually breaks something. There are new screen sizes and UI paradigms (?) to consider. There are even new things that your development tools add that can be used. The upcoming 3.1 release of WebcomiX builds on a lot of features added to Xamarin.Forms 4. One, it is a new version and you have to move to it at some point. Two, the deep linking means you could launch comics from notifications and the Home search bar. No one asked for it but they are getting it.

Still, it is a shame to see another app bite the dust after all these years. While we did the same thing, I don’t think we were ever competitors.