NodeBB Android App



  • So as my forum lacks Tapatalk support I decided to start working on an app based on WebView.
    Basically it is nothing special and very simple to edit.
    Feel free to do anything you want with it.

    Screenshots:
    Unbenannt.png

    Features:

    • Full JavaScript Support
    • Cache & Cookie Support
    • HW Acceleration
    • Up- & Download Support
    • Sidebar
    • Analytics
    • AdMob
    • Multiple Colors
    • Parse

    Source Code:
    https://github.com/ReyKoxha/nodebb-webview


  • Translator

    Looks and works like a charm on my Nexus 5, ironically it works better then Firefox :|



  • @Kowlin said:

    Looks and works like a charm on my Nexus 5, ironically it works better then Firefox :|

    Google updated the WebView just a few months ago, if I am not mistaken it is the same/identical framework Google Chrome for Android is built on.


  • Translator

    Should really think of switching to Chrome. But I'm way to used to Firefox for all my devices


  • Admin

    You should publish on Google Play :)



  • @psychobunny said:

    You should publish on Google Play :)

    Thank you, but as I am underage and credit cards are uncommon in Germany it will take me somewhile. I also think it would be better to wait until I got the upload working.


  • Translator

    @AOKP if you want I am thinking of acquiring a publisher account. We can speak about it if you like



  • I don't know if you guys are aware but you can make it for various OSens using Apache Cordova or Crosswalk. I made an Android app for my BBS using cordova and its really easy.

    Edit: Cordova's platform support:

    Edit2: Some banks offer prepaid international debit cards that work with Google Play. Plastic ones; virtual ones don't work with Google Play.



  • @priapo said:

    I don't know if you guys are aware but you can make it for various OSens using Apache Cordova or Crosswalk. I made an Android app for my BBS using cordova and its really easy.

    Edit: Cordova's platform support:

    Edit2: Some banks offer prepaid international debit cards that work with Google Play. Plastic ones; virtual ones don't work with Google Play.

    Quick delete this post. He is destroying my work 😡

    Joking aside:
    I took a closer look at Crosswalk already due to the simple upload support.
    Maybe you want to share your Cordova approach with us, I am very interested in it.

    About the prepaid debit card:
    I could apply for it, but it takes time and still costs me money. However I asked a friend who is willed to lend me his card for this purpose.


  • Translator

    @AOKP Lucky you, I need to stalk some friends from the US to do the same :P



  • @Kowlin said:

    @AOKP Lucky you, I need to stalk some friends from the US to do the same :P

    Finnland rules :bowtie:


  • Translator

    @AOKP I think I can easly order a prepaid creditcard but... Well... meh :| the prices...



  • My app is just a simple wrapper for inappbrowser. The files I changed were:

    cd bbs/

    $ cordova platform ls
    Installed platforms: android 4.0.0
    Available platforms: amazon-fireos, blackberry10, browser, firefoxos, ubuntu
    
    $ cordova plugin ls
    cordova-plugin-inappbrowser 1.0.0 "InAppBrowser"
    cordova-plugin-whitelist 1.0.0 "Whitelist"
    

    cat www/index.html

    <!DOCTYPE html>
    <html>
        <head>
            <!--
            Customize this policy to fit your own app's needs. For more guidance, see:
                https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy
            Some notes:
                * gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
                * https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
                * Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
                    * Enable inline JS: add 'unsafe-inline' to default-src
            -->
            <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
            <meta name="format-detection" content="telephone=no">
            <meta name="msapplication-tap-highlight" content="no">
            <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
            <link rel="stylesheet" type="text/css" href="css/index.css">
            <title>Hello World</title>
        </head>
        <body>
            <script type="text/javascript" src="cordova.js"></script>
            <script type="text/javascript" src="js/index.js"></script>
        </body>
    </html>
    

    cat www/js/index.js

    document.addEventListener("deviceready", onDeviceReady, false);
    
    function onDeviceReady() {
    	//window.open = cordova.InAppBrowser.open;
    	window.open('http://bbs.kassius.org', '_blank', 'location=no');
    }
    

    cat www/css/index.css

    /*
     * Licensed to the Apache Software Foundation (ASF) under one
     * or more contributor license agreements.  See the NOTICE file
     * distributed with this work for additional information
     * regarding copyright ownership.  The ASF licenses this file
     * to you under the Apache License, Version 2.0 (the
     * "License"); you may not use this file except in compliance
     * with the License.  You may obtain a copy of the License at
     *
     * http://www.apache.org/licenses/LICENSE-2.0
     *
     * Unless required by applicable law or agreed to in writing,
     * software distributed under the License is distributed on an
     * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
     * KIND, either express or implied.  See the License for the
     * specific language governing permissions and limitations
     * under the License.
     */
    * {
        -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
    }
    
    body {
        -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
        -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
        -webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */
        background-color:#E4E4E4;
        background-image:linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
        background-image:-webkit-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
        background-image:-ms-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
        background-image:-webkit-gradient(
            linear,
            left top,
            left bottom,
            color-stop(0, #A7A7A7),
            color-stop(0.51, #E4E4E4)
        );
        background-attachment:fixed;
        font-family:'HelveticaNeue-Light', 'HelveticaNeue', Helvetica, Arial, sans-serif;
        font-size:12px;
        height:100%;
        margin:0px;
        padding:0px;
        text-transform:uppercase;
        width:100%;
    }
    
    #bbs-frame
    {
    	position: absolute;
    	top: 5%;
    	left: 5%;
    	width: 90%;
    	height: 90%;
    }
    
    
    /* Portrait layout (default) */
    .app {
        background:url(../img/logo.png) no-repeat center top; /* 170px x 200px */
        position:absolute;             /* position in the center of the screen */
        left:50%;
        top:50%;
        height:50px;                   /* text area height */
        width:225px;                   /* text area width */
        text-align:center;
        padding:180px 0px 0px 0px;     /* image height is 200px (bottom 20px are overlapped with text) */
        margin:-115px 0px 0px -112px;  /* offset vertical: half of image height and text area height */
                                       /* offset horizontal: half of text area width */
    }
    
    /* Landscape layout (with min-width) */
    @media screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
        .app {
            background-position:left center;
            padding:75px 0px 75px 170px;  /* padding-top + padding-bottom + text area = image height */
            margin:-90px 0px 0px -198px;  /* offset vertical: half of image height */
                                          /* offset horizontal: half of image width and text area width */
        }
    }
    
    h1 {
        font-size:24px;
        font-weight:normal;
        margin:0px;
        overflow:visible;
        padding:0px;
        text-align:center;
    }
    
    .event {
        border-radius:4px;
        -webkit-border-radius:4px;
        color:#FFFFFF;
        font-size:12px;
        margin:0px 30px;
        padding:2px 0px;
    }
    
    .event.listening {
        background-color:#333333;
        display:block;
    }
    
    .event.received {
        background-color:#4B946A;
        display:none;
    }
    
    @keyframes fade {
        from { opacity: 1.0; }
        50% { opacity: 0.4; }
        to { opacity: 1.0; }
    }
     
    @-webkit-keyframes fade {
        from { opacity: 1.0; }
        50% { opacity: 0.4; }
        to { opacity: 1.0; }
    }
     
    .blink {
        animation:fade 3000ms infinite;
        -webkit-animation:fade 3000ms infinite;
    }
    


  • Did somebody make it works in android 4? It doesn't let me install it, it always says "there is a problem parsing the package".



  • @Pixel said:

    Did somebody make it works in android 4? It doesn't let me install it, it always says "there is a problem parsing the package".

    Strange. The build target was set to 19, so basically KitKat.



  • @AOKP said:

    @Pixel said:

    Did somebody make it works in android 4? It doesn't let me install it, it always says "there is a problem parsing the package".

    Strange. The build target was set to 19, so basically KitKat.

    I've also tried in another mobile running Android 4.0.4 with no luck, I get the same error. Very strange.



  • @Pixel said:

    @AOKP said:

    @Pixel said:

    Did somebody make it works in android 4? It doesn't let me install it, it always says "there is a problem parsing the package".

    Strange. The build target was set to 19, so basically KitKat.

    I've also tried in another mobile running Android 4.0.4 with no luck, I get the same error. Very strange.

    Thats not KitKat.


  • Global Moderator

    Works fine on Lollipop, but would be nice if that NodeBB Community bar at the top could vanish. Full screen apps for the win-zip.



  • @AOKP ups, you're right. So I've checked the versions the other mobile is 4.2 (jelly bean?), so it isn't kitkat neither.



  • @a_5mith said:

    Works fine on Lollipop, but would be nice if that NodeBB Community bar at the top could vanish. Full screen apps for the win-zip.

    Same thought, I will make it happen within the next release.

    @Pixel said:

    @AOKP ups, you're right. So I've checked the versions the other mobile is 4.2 (jelly bean?), so it isn't kitkat neither.

    Nope. 😆
    Your phones must be quite old. ;)

    Edit:
    I tried Crosswalk out. It is quite good. Uploading works out of the box, so it is a big benefit.
    However I am not so happy with it's performance and size (25kB vs 20MB). I will see if I can optimize it a bit maybe.

    Edit 2:
    Here a little preview for v2:
    https://community.nodebb.org/topic/6593/test-from-new-webview-app


Log in to reply
 


Looks like your connection to NodeBB was lost, please wait while we try to reconnect.