Tutorial. Make a free android app for displaying Joomla articles

Updated: 24 February 2019

Viska-appen for android.

Framework7 v4 has recently arrived. It is different in installation and you can install Framework7 Cordova with webpack also. If you use webpack you can build web apps very easy and identical to apk-package. Note: The html code is no longer in index.html but in src/pages/home.f7.html. There are some other differences like V4 does only work for android 5+, but the webb app works for android 4.4. If you build a web app you find it in www folder this time.

Make an smartphone app for displaying Joomla articles.

I have no experience of making apps, but I have succeded to make two apps.

I choose Framework7, but you have two choices either: 1/ Framework7 with HTML-code that I found most powerful. You can build apk if you install Android Studio, but if you want to build ios you must have a Mac lso or 2/ Framework7 React that is javascript based but you can easy build it as a webb app so ios, PC and android can view the app like this: https://www.viska.se/app

Framework7 har several templates, so I choosed Singe View that seemed simple.

You can download it here https://framework7.io/templates/

You shall also download Framework Kitchen Zink, which contains examples of code that are useful.

You must install Node.js and install Gulp.

Look in the templates Readme file where you get instructions what to do.

The good with Framework7 is that you can view the app in your browser during the work.

Now the menu.

There are some alternatives for you:

Accordion menu with submenu for links

Accordion menu with subcontent like HTML-code for your article, so you dont need to open your home page.

Simple menu för different links.

I recommend a simple menu for all links. An accordion menu produced problems at search as I got the accordion menu title displayed and not what I searched for. It confused the users of the app.

Build the menu via accordion.html or list.html from Kitchen zink. You will find the right code there.

When the menu looks OK. You can add your links. However the opening of the links is the big problem. Will come to that later.

Now you need a Searchbar at the top. Easy to fix if you now exactly how. This is the code I used.

div class="page-content">
<div class="title"></div>
<form data-search-container=".search-list" data-search-in=".item-title" class="searchbar searchbar-init">
<div class="searchbar-inner">
<div class="searchbar-input-wrap tooltip-init" data-tooltip="Obs! Om annat namn i resultat syns klicka på det så finns det i undermenyn">
<input type="search" placeholder="Sök"/>
<i class="searchbar-icon"></i>
<span class="input-clear-button"></span>
</div>
<span class="searchbar-disable-button">Avbryt</span>
</div>
</form>

<div class="searchbar-backdrop"></div>

<div class="list accordion-list simple-list searchbar-not-found">
<ul>
<li>Fann inget</li>
</ul>
</div>



<div class="list search-list searchbar-found">
<div class="block block-strong no-hairlines">

Look at this code:

tooltip-init" data-tooltip="Obs! Om annat namn i resultat syns klicka på det så finns det i undermenyn">

It demonstrates how you make tooltips, if you read the documentation you will not be sure how to fix this.

Now your list must be searchable:

Put this above all lists:

then after the last list put a </div>

Now check that you can search your lists and that it works for all lists.

The </div> put att wrong place can mess up things totally. But if you have your app in browser you can view sourcecode in browser and red html code is wrong and try to fix them.

Now we go back to the external links.

You have two choices:

<li>
<a class="item-content item-link link external" href="https://www.viska.se/sjalvhjalp-2/sjalvhjalpsrad/6941-agitation-upphetsning">

<div class="item-inner">
<div class="item-title">Upphetsning</div>
</div>
</a>
</li>

This opens up in the app your webpage, but to return to the app you must hit return in your smartphone. You can if you like add tooltips to the link that informs about that.

If you don't accept this you can use Cordovas Inappbrowser plugin. But then you must start a new project a Cordova project. Here is what you do.

https://www.npmjs.com/package/framework7-cli

And install also Cordovas InappBrowser plugin.

When the Cordova is ready copy the inside of www folder in Framework7 to inside of Cordovas www folder.

Then enable: <script src="/cordova.js"></script> at the bottom of index.html

Now you have to add Inappbrowser in file:

www/js/app.js

var ref = cordova.InAppBrowser.open('https://www.viska.se', '_blank', 'location=yes');
ref.addEventListener('loadstart', function(event) { alert(event.url); });
window.open = cordova.InAppBrowser.open;

before:

// Login Screen Demo

Then run the command: F7 serve android

To view your project in browser.

Now you can add your links:

<li>
<a class="item-link" href="#" onclick="window.open('https://www.viska.se/sjalvhjalp-2/sjalvhjalpsrad/6498-fiskolja-omega-3', '_blank', 'location=yes');">
<div class="item-inner">
<div class="item-title">Fiskolja/Omega-3</div>
</div>
</a>
</li>

This code triggers the inAppbrowser in the menu links:

onclick="window.open('https://www.viska.se/sjalvhjalp-2/sjalvhjalpsrad/6498-fiskolja-omega-3', '_blank', 'location=yes');"> Only _blank worked for me and not _self and _system.

However for me the grey list on the opened page did only appear after I built the app. Via the grey list you can shut down the page and get back to the app. This is probably due to that cordova.js is not available than after the app is built.

If you have text in your app that you don't want to appear in Search do like this:

<div class="item-inner">
<div class="title searchbar-hide-on-search">Psykossymptom</div>
</div>

Then the title will not appear in search results.

If you want a logo for the app do like this:

<div class="title sliding">Viska-appen</div><img src="/./img/viskaappen.png">

When your app is ready you can built it, if you installed the program Android Studio.

But first you have to set up the path, which is a little difficult:

https://www.youtube.com/watch?v=YVaGbwQephg

Now you can build your app with:

F7 build android

You will find your apk in:

/platform/android/app/build/outputs/apk/debug/app-debug.apk

Now you can install it in your android device.

You can look how my app looks like on the web: https://www.viska.se/app

If you want to build an ios app you must have a Mac computer and use the program Xcode.

My app consisted of many different menus that looked uneven and not homogenous.

You can fix that with CSS for different lists and list item and it is very easy.

If you have a menu item you want to adjust:

add an unique name:

in www/css/app.css add:

.adder {

margin: -20px 0 0 0;

background-color: #F0F0F0;

}