• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer
  • Home
  • Create a VM ($25 Credit)
  • Buy a Domain
  • 1 Month free Back Blaze Backup
  • Other Deals
    • Domain Email
    • Nixstats Server Monitoring
    • ewww.io Auto WordPress Image Resizing and Acceleration
  • About
  • Links

IoT, Code, Security, Server Stuff etc

Views are my own and not my employer's.

Personal Development Blog...

Coding for fun since 1996, Learn by doing and sharing.

Buy a domain name, then create your own server (get $25 free credit)

View all of my posts.

  • Cloud
    • I moved my domain to UpCloud (on the other side of the world) from Vultr (Sydney) and could not be happier with the performance.
    • How to buy a new domain and SSL cert from NameCheap, a Server from Digital Ocean and configure it.
    • Setting up a Vultr VM and configuring it
    • All Cloud Articles
  • Dev
    • I moved my domain to UpCloud (on the other side of the world) from Vultr (Sydney) and could not be happier with the performance.
    • How to setup pooled MySQL connections in Node JS that don’t disconnect
    • NodeJS code to handle App logins via API (using MySQL connection pools (1000 connections) and query parameters)
    • Infographic: So you have an idea for an app
    • All Development Articles
  • MySQL
    • Using the free Adminer GUI for MySQL on your website
    • All MySQL Articles
  • Perf
    • PHP 7 code to send object oriented sanitised input data via bound parameters to a MYSQL database
    • I moved my domain to UpCloud (on the other side of the world) from Vultr (Sydney) and could not be happier with the performance.
    • Measuring VM performance (CPU, Disk, Latency, Concurrent Users etc) on Ubuntu and comparing Vultr, Digital Ocean and UpCloud – Part 1 of 4
    • Speeding up WordPress with the ewww.io ExactDN CDN and Image Compression Plugin
    • Setting up a website to use Cloudflare on a VM hosted on Vultr and Namecheap
    • All Performance Articles
  • Sec
    • Using the Qualys FreeScan Scanner to test your website for online vulnerabilities
    • Using OWASP ZAP GUI to scan your Applications for security issues
    • Setting up the Debian Kali Linux distro to perform penetration testing of your systems
    • Enabling TLS 1.3 SSL on a NGINX Website (Ubuntu 16.04 server) that is using Cloudflare
    • PHP implementation to check a password exposure level with Troy Hunt’s pwnedpasswords API
    • Setting strong SSL cryptographic protocols and ciphers on Ubuntu and NGINX
    • Securing Google G Suite email by setting up SPF, DKIM and DMARC with Cloudflare
    • All Security Articles
  • Server
    • I moved my domain to UpCloud (on the other side of the world) from Vultr (Sydney) and could not be happier with the performance.
    • All Server Articles
  • Ubuntu
    • I moved my domain to UpCloud (on the other side of the world) from Vultr (Sydney) and could not be happier with the performance.
    • Useful Linux Terminal Commands
    • All Ubuntu Articles
  • VM
    • I moved my domain to UpCloud (on the other side of the world) from Vultr (Sydney) and could not be happier with the performance.
    • All VM Articles
  • WordPress
    • Speeding up WordPress with the ewww.io ExactDN CDN and Image Compression Plugin
    • Installing and managing WordPress with WP-CLI from the command line on Ubuntu
    • How to backup WordPress on a host that has CPanel
    • Moving WordPress to a new self managed server away from CPanel
    • Moving a CPanel domain with email to a self managed VPS and Gmail
    • All WordPress Articles
  • All

app

Add two factor auth login protection to WordPress with YubiCo hardware YubiKeys and or 2FA Authenticator App

October 28, 2018 by Simon

Here is a quick guide to show you how to add two-factor auth login protection to WordPress with YubiCo hardware YubiKeys and or 2FA authenticator app

I have a number of guides on moving away from CPanel, Setting up VM’s on AWS, Vultr or Digital Ocean along with installing and managing WordPress from the command line.

Why Secure WordPress

WordPress CMS is a widely targeted CMS for hackers. View the official WordPress stats on WordPress Version/PHP and MySQL Version. View WordPress vulnerabilities here.

Read the Sucuri 2017 report on reported WordPress Hacks here (spoiler 34,371 infected websites in 2017).

Plugins exist to secure and scan WordPress. Read my blog post here on the now-retired Gravityaity Scan plugin and the awesome WordFence security plugin.

You (and hackers) can scan your site with https://wpscans.com/ or other open-source tools like wp-scan from OWASP ZAP. If you manage a WordPress site I’d recommend you install Kali Linux to scan your site.

Running a wp scan in Kali Linux is easy.

wpscan --url https://fearby.com --debug-output 2> ~/Desktop/wpscan.txt

The output from the Kali Linux wpscan tool

WPscan tool in KaiLinux

What are Hardware YubiCo YubiKeys

Read my guide here to see what YubiCo YubiKeys are and how to use them.

Yubico YubiKeys

Get the Two-Factor Plugin for WordPress Plugin

Plugin: https://en-au.wordpress.org/plugins/two-factor/

Two-Factor

Plugin Page at WordPress.org

Two Factor Auth Plugin

The source code for this plugin is available (nice): https://github.com/georgestephanis/two-factor. This plugin was updated 2 weeks ago (nice).

Downloading the Plugin

FYI: I do not allow downloading or updating of plugins in WordPress (via FTP), I prefer SSH manual downloading. FTP plugin installation and updating are not allowed on my site.

I got the latest download URL (e.g. https://downloads.wordpress.org/plugin/two-factor.zip) by copying the URL from the download button above.

I connected to my server via SSH and navigated to my WordPress plugin folder

cd /your-www-root/wp-content/plugins

I download the plugin.

[email protected]:/your-www-root/wp-content/plugins# wget https://downloads.wordpress.org/plugin/two-factor.zip
--2018-10-28 14:44:27--  https://downloads.wordpress.org/plugin/two-factor.zip
Resolving downloads.wordpress.org (downloads.wordpress.org)... 198.143.164.250
Connecting to downloads.wordpress.org (downloads.wordpress.org)|198.143.164.250|:443... connected.
HTTP request sent, awaiting response... 200 OK
Length: 47882 (47K) [application/octet-stream]
Saving to: 'two-factor.zip'

two-factor.zip                             100%[=======================================================================================>]  46.76K  --.-KB/s    in 0.001s

2018-10-28 14:44:27 (37.1 MB/s) - 'two-factor.zip' saved [47882/47882]

I extracted the plugin zip file

[email protected]:/your-www-root/wp-content/plugins# unzip two-factor.zip
Archive:  two-factor.zip
   creating: two-factor/
   creating: two-factor/assets/
  inflating: two-factor/assets/banner-1544x500.png
  inflating: two-factor/assets/banner-772x250.png
  inflating: two-factor/assets/icon-128x128.png
  inflating: two-factor/assets/icon-256x256.png
  inflating: two-factor/class.two-factor-core.php
   creating: two-factor/includes/
  inflating: two-factor/includes/function.login-header.php
   creating: two-factor/includes/Google/
  inflating: two-factor/includes/Google/u2f-api.js
   creating: two-factor/includes/Yubico/
  inflating: two-factor/includes/Yubico/U2F.php
   creating: two-factor/providers/
  inflating: two-factor/providers/class.two-factor-backup-codes.php
  inflating: two-factor/providers/class.two-factor-dummy.php
  inflating: two-factor/providers/class.two-factor-email.php
  inflating: two-factor/providers/class.two-factor-fido-u2f-admin-list-table.php
  inflating: two-factor/providers/class.two-factor-fido-u2f-admin.php
  inflating: two-factor/providers/class.two-factor-fido-u2f.php
  inflating: two-factor/providers/class.two-factor-provider.php
  inflating: two-factor/providers/class.two-factor-totp.php
   creating: two-factor/providers/css/
  inflating: two-factor/providers/css/fido-u2f-admin.css
   creating: two-factor/providers/js/
  inflating: two-factor/providers/js/fido-u2f-admin-inline-edit.js
  inflating: two-factor/providers/js/fido-u2f-admin.js
  inflating: two-factor/providers/js/fido-u2f-login.js
  inflating: two-factor/readme.md
  inflating: two-factor/readme.txt
  inflating: two-factor/two-factor.php
  inflating: two-factor/user-edit.css

Enable the Plugin

Don’t forget to update the plugin in WordPress.

Enable the Plugin in WordPress

Once the plugin is enabled I can setup Two-factor authentication

Edit your Users

To setup two-factor authentication open your WordPress users screen (/wp-admin/users.php).

WordPress Users List /wp-admin/users.php

Notice the Two-Factor column

Edit your desired user to enable two-factor login options

Scroll down to Two Factor Options header, you will see a QR code that you can scan with your two-factor authentication app (e.g Google Authenticator or YubiCo Authenticator).

Enable 2FA via plugin

Always generate and save backup codes in case you lose your YubiKeys or authenticator app.

You can enable authentication methods as required.

Add the code to your Authenticator app. I will add mine to my Yubico Authenticator app that requires the insertion of a physical YubiKey. I can read my YubiKey via NFC and use my mobile phone to generate one time passwords too. Read here to learn about YubiKey 2FA (touch) devices. I have secured my Ubuntu/Debian and macOSX with these keys,

TIP: Don’t forget to save the user after editing.

Add the YubiKey 2FA (touch) to WordPress logins.

While editing a user click Register New Key under Security Keys

Add the YubiKey 2FA to WordPress

Add your primary and backup YubiKey as required (I added both of mine).

Screenshot showing two YubiKeys added to WordPress.

Enable all desired 2FA options

  • Email (OFF)
  • Time based One-Time Password (Authenticator App) (ON)
  • FIDO Universal 2nd Factor (U2F) – YubiKey Insertion and touch (ON)
  • Backup Codes (ON)

Set all desired 2FA login methods

TIP: Don’t forget to save the user after editing.

Users Table

Aim to set up every user who has access to your WordPress to use 2FA.

Mobile 2FA login

I tested logos via mobile and I was prompted to tab my YubiKey to my phone. Nice.

What happens at login?

When One Time Password is enabled as the primary authentication method I am prompted for a one-time password after entering my username and password. I then need to insert my YubiKey (or tap the YubiKey to my phone (via NFC)) to generate a one time password.

Screenshot of 2FA login prompt

When FIDO is enabled I need to insert my YubiKey and press the button.

Enter Security Key

Conclusion

I can now secure my WordPress site with 2FA protections without expensive security plugins.

I hope this guide helps someone.

More

Read more here

Ask a question or recommend an article

[contact-form-7 id=”30″ title=”Ask a Question”]

Revision History

v1.1 Added Mobile login details

v1.0 Initial post

Filed Under: 2FA, 2nd Factor, Auth, Authorization, Blog, MFA, NFC, owasp, Security, SSH, Vulnerability, Yubico, YubiKey Tagged With: 2FA, add, and, app, auth, authenticator, factor, hardware, login, or, Protection, to, two, with, wordpress, Yubico, YubiKeys

Setup two factor authenticator protection at login on Ubuntu or Debian

October 14, 2018 by Simon

This is a quick post that shows how I set up two-factor authenticator protection at login on Ubuntu or Debian

Aside

If you have not read my previous posts I have now moved my blog to the awesome UpCloud host (signup using this link to get $25 free UpCloud VM credit). I compared Digital Ocean, Vultr and UpCloud Disk IO here and UpCloud came out on top by a long way (read the blog post here). Here is my blog post on moving from Vultr to UpCloud.

Buy a domain name here

Domain names for just 88 cents!

Now on with the post.

Backup

I ensured I had a backup of my server. This is easy to do on UpCloud. If something goes wrong I will rollback.

Sever Backup Confirmed

Why Setup 2FA on SSH connections

1) Firewalls or whitelists may not protect you from detection.

2) SSH authorisation bypass bugs may appear.

I’ve just relased libssh 0.8.4 and 0.7.6 to address CVE-2018-10933. This is an auth bypass in the server. Please update as soon as possible! https://t.co/Qhra2TXqzm

— Andreas Schneider (@cryptomilk) October 16, 2018

2FA authorisation is another lube of defence.

Yubico Yubi Key

Read my block post here to learn how to use the Yubico YubiKey NEO hardware-based two-factor authentication device to improve authentication and logins to OSX and software

Timezone

It is important that you set the same timezone as the server you are trying to secure two 2FA. I can run this command on Linux to set the timezone.

On Debian, I set the time using this guide.

dpkg-reconfigure tzdata

Check the time command

> timedatectl
> Local time: Tue 2019-06-25 16:45:20 UTC
> Universal time: Tue 2019-06-25 16:45:20 UTC
> RTC time: Wed 2019-06-26 02:37:44
> Time zone: Etc/UTC (UTC, +0000)
> Network time on: yes
> NTP synchronized: yes
> RTC in local TZ: no

sudo hwclock --show

I set the timezone

> sudo timedatectl set-timezone Australia/Sydney

I confirmed the timezone

> timedatectl
> Local time: Wed 2019-06-26 02:47:42 AEST
> Universal time: Tue 2019-06-25 16:47:42 UTC
> RTC time: Wed 2019-06-26 02:40:06
> Time zone: Australia/Sydney (AEST, +1000)
> Network time on: yes
> NTP synchronized: yes
> RTC in local TZ: no

I installed a npt time server

I followed this guide to install an NTP time server (failed at: ntpdate linuxconfig.ntp) and this guide to manually sync

I installed the Google Authenticator app

sudo apt install libpam-google-authenticator
sudo apt-get install libpam-google-authenticator

Configure Google Authenticator

Run google-authenticator and answer the following questions

Q1) Do you want authentication tokens to be time-based (y/n): Y

You will be presented with a token you can add to the Yubico Authenticator or other authenticator apps,

2FA Code

TIP: Write down any recovery codes displayed

Scan the code with your 2FA Authenticator app (e.g Google Authenticator, Yubico Authenticator or freeOTP from https://freeotp.github.io)

Scan 2FA Code

The 2FA code is now available for use in my YubiCo Authenticator app

Authenticator App Ready

Q2) Do you want me to update your “/root/.google_authenticator” file? (y/n): Y

Q3) Do you want to disallow multiple uses of the same authentication
token? This restricts you to one login about every 30s, but it increases
your chances to notice or even prevent man-in-the-middle attacks (y/n): Y

Q4) By default, a new token is generated every 30 seconds by the mobile app.
In order to compensate for possible time-skew between the client and the server,
we allow an extra token before and after the current time. This allows for a
time skew of up to 30 seconds between the authentication server and client. If you
experience problems with poor time synchronization, you can increase the window
from its default size of 3 permitted codes (one previous code, the current
code, the next code) to 17 permitted codes (the 8 previous codes, the current
code, and the 8 next codes). This will permit for a time skew of up to 4 minutes
between client and server.
Do you want to do so? (y/n) y: Y

Q5) If the computer that you are logging into isn’t hardened against brute-force login attempts, you can enable rate-limiting for the authentication module. By default, this limits attackers to no more than 3 login attempts every 30s.
Do you want to enable rate-limiting? (y/n): Y

Review Google Authenticator Config

sudo nano ~/.google_authenticator

You can change this if need be.

sudo nano ~/.google_authenticator

Edit SSH Configuration (Authentication)

sudo nano /etc/pam.d/sshd

Add the line below the line “@include common-auth”

auth required pam_google_authenticator.so

Comment out the following line (this is the most important step, this forces 2FA)

#@include common-auth

Edit SSH Configuration (Challenge Response Authentication)

Edit the ssh config file.

sudo nano /etc/ssh/sshd_config

Search For

ChallengeResponseAuthentication

Set this to

yes

Ensure the following line exists

UsePAM yes

Add the following line

AuthenticationMethods publickey,password publickey,keyboard-interactive

Edit Common Auth

sudo nano /etc/pam.d/common-auth

Add the following line before the line that says “auth [success=1 default=ignore] pam_unix.so nullok_secure”

auth required pam_google_authenticator.so

Restart the SSH service and test the codes in a new terminal before rebooting.

TIP: Do not exit the working connected session and you may need it to fix issues.

Restart the SSH service a tets it

/etc/init.d/ssh restart
[ ok ] Restarting ssh (via systemctl): ssh.service.

If you have failed to set it up authenticator codes will fail to work.

Failed attempts

Further authentication required
Using keyboard-interactive authentication.
Verification code:
Using keyboard-interactive authentication.
Verification code:
Using keyboard-interactive authentication.
Verification code:

When it is configured OK (at login SSH connection) I was prompted for further information

Further Information required
Using keyboard-interactive authentication
Verification Code: ######
[email protected]#

I am now prompted at login to insert a 2FA token (after inserting my YubiKey)

Working 2FA in Unix

Turn on 2FA on other sites

Check out https://www.turnon2fa.com and tutorials here.

I hope this guide helps someone.

Please consider using my referral code and get $25 UpCloud VM credit if you need to create a server online.

https://www.upcloud.com/register/?promo=D84793

Ask a question or recommend an article

[contact-form-7 id=”30″ title=”Ask a Question”]

Revision History

V1.4 June 2019: Works on Debian 9.9

V1.3 turnon2fa.com

V1.2 ssh auth bypass

v1.1 Authenticator apps

v1.0 Initial Post

Filed Under: 2FA, 2nd Factor, Auth, Authorization, Code, Debian, Security, Ubuntu, UpCloud, Yubico, YubiKey Tagged With: app, at, authenticator, debian, factor, login, on, or, Protection, security, Setup, two, ubuntu, Yubico, YubiKey

Creating your first Java FX app and using the Gluon Scene Builder in the IntelliJ IDEA IDE

July 3, 2018 by Simon

This is quick guide explaining how I created my first JavaFX application using the Gluon Scene Builder in the IntelliJ IDEA IDE.

I have a number of guides on moving away from CPanel, Setting up VM’s on UpCloud, AWS, Vultr or Digital Ocean along with installing and managing WordPress from the command line. I created this blog post on creating a Java GUI app with the older Swing technology (Java FX replaces Swing). I now want to create a JavaFX app to control my UpCloud VM’s.

If you have not read my previous posts I have now moved my blog etc to the awesome UpCloud host. Sign up using this link to get $25 free credit.

Do read: Preparing for JavaFX Application Development: https://wiki.openjdk.java.net/display/OpenJFX/Building+OpenJFX#BuildingOpenJFX-Mac

Downloading Java

Download and install Java SE 8 or higher from http://www.oracle.com/technetwork/java/javase/downloads/index.html

Java 10 install screenshot

Download Intelli J IDEA IDE

Goto https://www.jetbrains.com/idea/

Click Download

Intelli J IDEA from www.jetbrains.com

Download the community edition

IntelliJ Download Options (Ultimate or Community)

Install Intelli J IDEA IDE

Drag Intelli J to your applications folder

Install Scenebuilder

I downloaded the Java Scene Builder (1.1 or 2.0) from here.

Download Scene Scene Builder

Install the Scene Builder (open the installer and drag it to your applications folder).

Configure the Scene Builder in IntelliJ IDEA IDE

  1. Open Intelli J IDEA IDE (set the default’s you wish)
  2. Create a New Project
  3. Open Intelli J IDEA IDE Preferences
  4. Open Languages & Frameworks then JavaFX and set your Scene Builder path (e.g /Applications/JavaFX Scene Builder 2.0.app/)
  5. Exit Preferences

Set the Scene Builder Path in IntelliJ

You can now create a JavaFX project an have a workign scene builder GUI.

New Project

After you create a JavaFX project open your JavaFX fxml file in Scene Builder (right click on the .fxml file and select Open in Scene Builder)

Scene Builder

Extended Scene Builder from Gluon

I read that there is a better Scene builder GUI available from https://gluonhq.com/products/scene-builder/

Read some of the Java Scene Builder v Gluon Scene Builder history here at Reddit for the latest on why.

I am going to download the Gluon Scene Builder from http://gluonhq.com/products/scene-builder/

Gluon Scene Builder webpage screenshot of https://gluonhq.com/products/scene-builder/

Download and install the Gluon Scene builder (at the time of writing requires Java 9 or higher).

Drag the scene builder to your apps folder to install

Now open IntelliJ IDEA IDE and open the preferences and change the scene builder path from “/Applications/JavaFX Scene Builder 2.0.app/” to “/Applications/SceneBuilder.app/“.

Save the IntelliJ IDEA preferences and Right click on your projects “fxml” file again and click “Open In Scene Builder” , do verify it is indeed the Gluon Scene builder by opening the about menu.

Gluon Scene Builder Help Menu Screenshot

Designing your first JavaFX app

Now you can design and code a JavaFX application with Gluon Scene Builder.

I am not an expert at java apps so i’d highly recommend you follow this guide to learn how to build a well-structured JavaFX panel layout (just ignore that it is using the standard Scene Builder, it works with the gluon one).

You should now have a working Java FX App

Java FX App running

The scene builder will save changes to your fxml file

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.Menu?>
<?import javafx.scene.control.MenuBar?>
<?import javafx.scene.control.MenuItem?>
<?import javafx.scene.control.TextArea?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.control.TreeView?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.Region?>
<?import javafx.scene.layout.VBox?>


<BorderPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/9.0.4" xmlns:fx="http://javafx.com/fxml/1" fx:controller="sample.Controller">
   <top>
      <VBox BorderPane.alignment="CENTER">
         <children>
            <MenuBar>
              <menus>
                <Menu mnemonicParsing="false" text="File">
                  <items>
                    <MenuItem mnemonicParsing="false" text="Close" />
                  </items>
                </Menu>
                <Menu mnemonicParsing="false" text="Edit">
                  <items>
                    <MenuItem mnemonicParsing="false" text="Delete" />
                  </items>
                </Menu>
                <Menu mnemonicParsing="false" text="Help">
                  <items>
                    <MenuItem mnemonicParsing="false" text="About" />
                  </items>
                </Menu>
              </menus>
            </MenuBar>
            <HBox spacing="8.0">
               <children>
                  <TextField promptText="ip" />
                  <TextField promptText="Username" />
                  <TextField promptText="Password" />
                  <Button mnemonicParsing="false" onMouseClicked="#loginButtonClicked" prefHeight="27.0" prefWidth="68.0" text="Login" />
                  <Region HBox.hgrow="ALWAYS" />
                  <Button mnemonicParsing="false" onMouseClicked="#settingsButtonClicked" text="Settings" />
               </children>
               <padding>
                  <Insets bottom="8.0" left="8.0" right="8.0" top="8.0" />
               </padding>
            </HBox>
         </children>
      </VBox>
   </top>
   <left>
      <TreeView prefHeight="200.0" prefWidth="200.0" BorderPane.alignment="CENTER" />
   </left>
   <center>
      <TextArea prefHeight="200.0" prefWidth="200.0" BorderPane.alignment="CENTER" />
   </center>
   <bottom>
      <HBox BorderPane.alignment="CENTER">
         <children>
            <Label text="Label" />
         </children>
         <padding>
            <Insets bottom="2.0" left="2.0" right="2.0" top="2.0" />
         </padding>
      </HBox>
   </bottom>
</BorderPane>

You can add functions into your controller class

package sample;

public class Controller {

    public void loginButtonClicked(){
        System.out.println("Login");

    }

    public void settingsButtonClicked(){
        System.out.println("Settings");

    }

}

Instaling Gluon JavaFX Templates

Close your test project and create a new project, but before you do click Configure then Plugins

Gluon has some nice templates

Now lets open In the following screen click Browse Repositories.

Search the repository for and install the “Gluon” plugin

Install Gluon Plugin

Restart IntelliJ IDEA IDE then you can use templates when creating a project.

Get your own VM

If you have not read my previous posts I have now moved my blog etc to the awesome UpCloud host. Sign up using this link to get $25 free credit.

Packaging a Java app for distribution on OSX

I will show how you can package your app to run on a Mac by using this.

Coming Soon

I will add more guides soon on using a custom JavaFx app to allow you to manage your own UpCloud server and perform Deploy/Init/Setup/Configure/Operate actions. Running CLI commands to deploy and manage a server is fun but is very tedious.

I blogged recently about using the UpCloud API and setting up a subdomain recently (I will use this server to test and prove the Javmanagementnt app).

Links

  • Official Javafx examples
  • Official Java learning paths.
  • Javafx examples at javacodegeeks.com
  • Java widgets
  • Reddit JavaHelp
  • Jenkov Tutorials

I hope this guide helps someone.

Ask a question or recommend an article

[contact-form-7 id=”30″ title=”Ask a Question”]

Revision History

V1.6 Jenkov Tutorials

V1.5 Reddit java help

V1.4 added java widgets link

V1.3 added javafx examples link.

V1.2 added Java learning paths

V1.1 added official Javafx examples

v1.0 Initial post

Filed Under: Development, IDE, Java Tagged With: and, app, Builder, creating, first, FX, Gluon, ide, idea, in, IntelliJ, java, Scene, the, Using, your

Write your first Java GUI app

March 31, 2018 by Simon

Here is a quick guide that shows how you can create and compile your first Java app with Net Beans.

I have a number of guides on moving hasting away form CPanel, Setting up VM’s on AWS, Vultr or Digital Ocean along with installing and managing WordPress from the command line. Updating the serves is a pain so I am writing a java app for Windows and OSX to help me manage the server by telnetting in on port 22 and performing routine actions from a button click in Java.

Installing Java and NetBeans IDE

Go to https://netbeans.org/downloads/index.html and click “JDK with NetBeans IDE Java SE bundle”

Download Net Beans

Download Netbeans and Java SE bundle

Download

Install Netbeans and Java SE bundle

Installed

Creating your first GUI Java Application

Create  New Project (Java Application) in NetBeans, Click Next

New Project

Name the project and set the main class as “main”

New Project

Add a new file, a “Swing GUI Form/JFrame form“.

Add Form

Name the J Frame Form and click Finish.

J Frame Form

Adding GUI elements in NetBeans IDE

In the Net Beans IDE, you can simply drag and drop elements.  I like to move my properties screen to the bottom centre.

GUI Designer

Set the panel at the default startup element

Add the following code to the main.java file

> framemain form = new framemain();
> form.setVisible(true);

Show Form

Compile the App

The app compiles 🙂

App Compiles

Add an action to a button

You can add button actions (events) in the design mode.

Add Button Event

Add Hello World alert box code to the button

Add the following to the Panel code file

> public static void infoBox(String infoMessage, String titleBar)
> {
>     JOptionPane.showMessageDialog(null, infoMessage, “InfoBox: ” + titleBar, JOptionPane.INFORMATION_MESSAGE);
> }

Add this to the action (event)

System.out.println(“Hello World”);
> frame1.infoBox(“Hello World”, “Hello World”);

Build

To build right-click on the project and click Clean and Build

java-build

The result is an app you can run by double-clicking the jar file.

Java Hello World Alert Box

I hope this helps someone.

Making an OSX APP file from the JAR file

Coming soon

Making a Windows EXE file from the JAR file

Coming soon

I hope this guide helps someone.

Ask a question or recommend an article

[contact-form-7 id=”30″ title=”Ask a Question”]

Revision History

v1.0 Initial post

Filed Under: Java Tagged With: app, first, gui, java, Write, your

How to start-up (flesh out) an app idea

February 3, 2018 by Simon

How do you start up a project idea?  How much time and effort do you put into product planning, prototyping, product development and product support?

Below is a rough guide to how you should start up a project (exec summary: start with defining the problem(s) and solution(s)).

I have blogged about app workflow here (mostly for public apps).

Infographic-So-you-have-an-idea-for-an-app-v1-3

Choose a Methodology

Early on you should choose a project management methodology, Agile is a popular (no lock-in) methodology compared to the older/less-flexible Waterfall or PRINCE2 methodologies.

I am a fan of the Agile methodology as it allows for inevitable frequent and required pivots over the more rigid locked down methodologies of the past.

Agile Software Development Manifesto

  • Individuals and interactions over processes and tools
  • Working software over comprehensive documentation
  • Customer collaboration over contract negotiation
  • Responding to change over following a plan

Agile Methodology and Practices (Stages)

1. Inception Phase

  • Form Initial Team (Stakeholders)
  • Develop Common Project Vision (What is the problem)
  • Align with Enterprise Direction (Integrate where possible)
  • Explore Initial Scope (MoSCoW Method)
  • Identify Initial Technical Strategy (testing, draft, final, support)
  • Develop Initial Release Plan (Goals)
  • Form Work Environment (remote, onsite etc)
  • Secure Funding (after whiteboarding)
  • Identify Risks (what if…)

2. Construction Phase

  • Produce Potentially Consumable Solution (Minimum Viable Product/Minimum Value)
  • Address Changing Stakeholder Needs (Pivot)
  • Move Closer to Deployable Release (Iterate)
  • Improve Quality (Measure)
  • Prove Architecture Early (Test)

3. Transition Phase

  • Ensure Solution Is Consumable (Signoff)
  • Deploy Solution (Test and Deploy)

4. Ongoing Goals

  • Fulfill Project Mission (Complete Must-have backlog)
  • Grow Team Members
  • Address Risk
  • Improve Team Process and Environment
  • Leverage/Enhance Existing Infrastructure

First, you will need to define the problem(s)

First, decide on what the problem(s) are and are aiming to solve?  After the problem(s) are known you can discuss and validate possible solutions before any coding is done (billed). The business requirement will drive the technical requirements/directions,.

Letting technology goals drive the project is a bad idea.  Why do you need XYZ? Is an app required after all? Does an “off the shelf solution” exist already?  Can existing processes or software be tweaked?

You will need stakeholders (or stakeholder proxies)

Choose customer stakeholders (or customer proxies) that are engaged and positive, build a team of about 5 people who can drive the decisions and who understand the problems. Involve key stakeholders early and capture problems in a formal setting

  • Identify the stakeholders and establish a team
  • Document the problems (as it is and not how it should be)
  • Identify and specify improvement points
  • Plan solutions and Iterate

Improving a process or product should be measurable and agreed. The main aim of a customer/stakeholder is to create validated user stories that define the problem(s) and solution(s) from the end users perspective.

Example user story formats (snip)

  • As a <role>, I want <capability> so that <receive benefit>
  • In order to <receive benefit> as a <role>, I want <goal/desire>
  • As a <role>, I want <goal/desire>
  • As <persona>, I want <what?> so that <why?>
  • etc

Whiteboarding

Whiteboarding is a great way to get everyone on board (and on the same page). One person may assume that something is a certain way but another person from the trenches may say it is not the case at all. It is key that problems reported lower down the managerial structure are listen to and be valued.  Accept any problems and add them to the backlog (prioritizing comes later).

Whiteboarding should build a backlog of ideas and common understanding of what the landscape of issues are. I use a tool called Mind Node from https://mindnode.com/ to map things electronically. Within minutes you can have a map of connected or not connected areas of interest.

Mind Node

Backlog

A backlog is a place where you can document issues and break issues down into tasks.  I have blogged before about Developing software and staying on track. You can use software like Trello, JIRA or Excel or notepad.

Backlogs should have crazy ideas and things that will never be developed. Agile development iterations should only pick the best items to work on.

Trello offers basic shared lists management

Jira offers a more complex Agile backlog management suite

Backlog

Mockup Prototypes

It is important that you develop validate ideas with on device/screen with mockups/prototypes before coding something.

I use Platforma web and Platforma mobile prototyping tools with Adobe XD to prototype before development.

Agile Terminology in Backlogs

Whiteboarding and Backlogs can allow you to capture Epics, Stories and Tasks. Once tasks are prioritized they can be picked up and complete in Agile work sprints.

  • Epics are the bigger user deliverable objectives like a “usable web-based solution”, “usable iOS mobile app”, “user Android Mobile app” or other long-term objectives.
  • Stories are smaller things like “deliver back-end server infrastructure”, “Deploy a working prototype of feature X”, “Build an API (Application Programmer Interface)”. A user story can usually be completed in 2 weeks.
  • Tasks are often subtasks to stories and can be done quite quickly.  A task could be “Change the colour scheme”, “Set up a testing environment” or  “Deploy the alpha release”.

Prioritize the Backlog Often

Prioritize items in the backlog often using the MoSCoW Method.

  • Must-Have
  • Should Have
  • Could Have
  • Won’t Have

Do not work on won’t have and focus on Must-Haves first.

Define the Solution and Minimum Success Criteria

The following graphic is well known within the Project Management community.

Project Mangement Lol

How would you feel as the customer knowing that you have not been understood and that you may not get what you need?

How would you feel as the developer not knowing fully what you need to deliver?

No one likes to double back or waste time and resources unnecessarily.  Define and plan early. “Failing to plan is planning to fail.” Benjamin Franklin

Technology Requirements

The backlog will drive the requirements; e.g:

  • mobile app or web app
  • type of technology needed
  • the location and number of servers
  • number of prototypes
  • scalability and redundancy

Knowing the requirements drives the technology. Technology drives the work and the budget.

TIP: Be wary of contractors that quote before listening to your full requirements. I was once told by a contractor that their main job was to “Con” “and Insult” you.  If you accept a quote before saying what you need is a guarantee that you are paying a load of profit.

Now What

If you have defined the problem well, have good user stories and validated with stakeholders you are on the right path.

Be prepared to pivot and set frequent milestones to launch value (RERO).

Obviously centralised web-based technology is easily updatable compared to compiled and distributed mobile apps so choosing the right technology early is key to success.

Security and Quality

This is the project triangle where you can choose two sides (not three)

project mgmt triangle project mgmt triangle

Quality is a given so you must choose that, the other given is secure in my opinion.  I have blogged before about securing Ubuntu in the cloud (checklist), running security audits, installing WordPress WordFence Firewalls and WordPress Anti Malware plugins along with updating OpenSSL and applying kernel patches to protect against Spectre and Meltdown securing issues.  Supporting an app is serious stuff and often deployment is the start of the real work.

Maintenance

Will you need to recompile apps to meet iOS or Android requirements?

How often will you release updates? What percentage of devices do you want to reach?

What “service level” will you set for concurrent users, uptime and failover?  What priority will you give to backups and snapshots of the environment in case you need to restore to a previous state?

Past Lesson learned

Obviously, the larger the project and higher levels of storage/reliability/security the more checks and balances need to happen.

The Australian Bureau of Statistics contracted IBM to handle the Australian online census in 2016 and the major failure and report into what the identified problems were was an interesting read.

  • The ABS website was pulled down on the night of the study, with it then being unavailable for about 40 hours.
  • The ABS is judged to have failed to communicate with the public properly about major
  • IBM is deemed to have failed to properly test its disaster recovery processes
  • IBM had failed to properly plan for how to bring systems back up again.
  • IBM’s failure to have tested a router restart, or have a backup synchronised and in place, appears to have been significant contributing factors to the failure of the eCensus
  • In his report, meanwhile, Mr MacGibbon also found that the long-term, almost exclusive, relationship between the ABS and IBM had contributed to the problems by meaning any external questioning or oversight was absent.
  • Read more about the report.

As a minimum, you should plan and discuss early on about the performance, reliability and uptime targets for any app.  Personally I have moved between multiple cloud providers (CloudAnt, Digital Ocean, AWS and Vultr) to comfortably meet cost v performance (each app WILL have different requirements)

Type of app

The type of app (Web, Desktop, Mobile) you will need will come after discussing the problem, focus on the problem(s) and not the solution(s).

Conclusion

Do’s

  1. Keep Source ownership and IP (never let contractors own the code or processes)
  2. Insist on frequent handover often
  3. Do plan for updated version with major OS releases
  4. Do secure the app
  5. Do plan for maintenance of the app.

Don’t

  • Lock into expensive maintenance contracts.
  • Ensure the vendor is passionate about solving your problem and not the invoice they will submit.
  • etc

I hope this guide helps someone.

More Reading

Making your first Android app

Making your first cross-platform mobile app

Making your first cross-platform app with Electron

Ask a question or recommend an article

[contact-form-7 id=”30″ title=”Ask a Question”]

Revision History

v1.1 added More Reading

v1.0 Initial post

Filed Under: Brainstorm Tagged With: an, app, flesh, How, idea, out, start, to, up

Building your first app on Heroku

November 26, 2017 by Simon

Below is my blog post on setting up a hello world app on Heroku that is powered by a database (e.g Client requests a page, the page reads a database and return hello world).

I found IBM/Cloudant would cost multiple thousands a month to run a good NoSQL database backend, I moved to a self-managed server on Digital Ocean in Singapore but the distance of the server killed latency and maximum throughput in Australia.  I moved to a dedicated AWS EC2 instance with a  Mongo DB cluster on AWS in Australia and it was great but pricey. A self-managed server (on Digital Ocean or Vultr) allows you to install whatever you want (e.g PHP, MySQL, MongoDB, Redis, SSL Certificate, Mail or WordPress) and configure what you want (but at what cost?).

Heroku say: “Get straight to building apps – Setting up, operating and maintaining your own platform is not where the race is won. Avoid the risk and complexity, and dedicate your energy to what really matters: building great apps.”.

heroku

Having setup serves on IBM Cloudant, Digital Ocean, AWS and Vultr (and even managing with RunCoud and Webmin) and not focusing on a self-managed server-issues like security, backup, security audits, upgrading PHP, updating ssl, setting up distributed mysql, updating https certificates etc sounds like the holy grail.

Let’s put that to the tets and build a Hello World App.

About Heroku

Heroku have a page here about what they offer.

Heroku

Sign up for Free: https://signup.heroku.com

Signup

Programming Languages (Ruby, PHP, Python, NodeJS, Java, Cloujure, Scala, Go etc). I so wanted to select “I’m not a developer” but I won’t.  I selected NodeJS.

Programming Language

Next: Verify your email, enter a password and you’ll find yourself here.

Setup Done

Now we can create an app?

App Help

Help

Ok, let’s skim the NodeJS help before we start: https://devcenter.heroku.com/articles/getting-started-with-nodejs#set-up

Let’s download the Command Line tools

Heroku CLI

Installing Heroku CLI on OSX was uneventful

Heroku CLI

I clicked the “I have installed the Heroku CLI” button.

Heroku wanted me to clone a repo but I logged in to Heroku the Heroku CLI and created a local Heroku folder first (in my local Terminal).

Last login: Sat Nov 25 18:54:43 on ttys000
192-168-1-200:~ username$ mkdir ~/Desktop/heroku
192-168-1-200:~ username$ cd ~/Desktop/heroku
192-168-1-200:heroku simon$ pwd
/Users/username/Desktop/heroku
192-168-1-200:~ username$ heroku login
heroku-cli: Updating to 6.14.38-9bfc11a... 12.7 MB/12.7 MB
Enter your Heroku credentials:
Email: [email protected]
Password: *******************************************************

I checked the Heroku Version

heroku --version
heroku-cli/6.14.38-9bfc11a (darwin-x64) node-v9.2.0

I checked Heroku Help

heroku --help
Usage: heroku COMMAND

Help topics, type heroku help TOPIC for more details:

 access          manage user access to apps
 addons          tools and services for developing, extending, and operating your app
 apps            manage apps
 auth            heroku authentication
 authorizations  OAuth authorizations
 buildpacks      manage the buildpacks for an app
 certs           a topic for the ssl plugin
 ci              run an application test suite on Heroku
 clients         OAuth clients on the platform
 config          manage app config vars
 container       Use containers to build and deploy Heroku apps
 domains         manage the domains for an app
 drains          list all log drains
 features        manage optional features
 git             manage local git repository for app
 keys            manage ssh keys
 labs            experimental features
 local           run heroku app locally
 logs            display recent log output
 maintenance     manage maintenance mode for an app
 members         manage organization members
 notifications   display notifications
 orgs            manage organizations
 pg              manage postgresql databases
 pipelines       manage collections of apps in pipelines
 plugins         manage plugins
 ps              manage dynos (dynos, workers)
 redis           manage heroku redis instances
 regions         list available regions
 releases        manage app releases
 run             run a one-off process inside a Heroku dyno
 sessions        OAuth sessions
 spaces          manage heroku private spaces
 status          status of the Heroku platform
 teams           manage teams
 update          update CLI
 webhooks        setup HTTP notifications of app activity

I ran the advised commands

git clone https://github.com/heroku/node-js-getting-started.git
cd node-js-getting-started

At this point, I followed the steps at https://devcenter.heroku.com/articles/getting-started-with-nodejs#deploy-the-app

Ran

heroku create
Creating app... done, ⬢ fathomless-anchorage-#####
https://fathomless-anchorage-##removed##.herokuapp.com/ | https://git.heroku.com/fathomless-anchorage-70974.git

The website is up

App Up

Where is this app located

traceroute fathomless-anchorage-70974.herokuapp.com
traceroute: Warning: fathomless-anchorage-70974.herokuapp.com has multiple addresses; using 54.243.121.236
traceroute to us-east-1-a.route.herokuapp.com (54.243.121.236), 64 hops max, 52 byte packets
 1  192-168-1-1 (192.168.1.1)  1.045 ms  1.121 ms  0.727 ms
 2  10.20.23.227 (10.20.23.227)  34.415 ms  30.378 ms  26.927 ms
 3  syd-gls-har-agr11-be-12 (202.7.205.13)  42.363 ms  42.957 ms  35.670 ms
 4  203-221-3-3 (203.221.3.3)  37.517 ms
    203-221-3-4 (203.221.3.4)  29.832 ms
    203-221-3-67 (203.221.3.67)  29.412 ms
 5  10ge4-11.core1.sjc1.he.net (72.52.101.37)  208.270 ms  213.679 ms
    las-b24-link.telia.net (213.248.95.232)  181.162 ms
 6  las-b21-link.telia.net (62.115.136.46)  173.171 ms
    100ge1-1.core1.sjc2.he.net (184.105.65.114)  208.705 ms
    10ge7-2.core1.sjc2.he.net (72.52.92.118)  212.061 ms
 7  dls-b21-link.telia.net (62.115.137.106)  205.615 ms
    100ge2-1.core4.fmt2.he.net (184.105.213.158)  204.186 ms
    dls-b21-link.telia.net (62.115.123.136)  204.317 ms
 8  a100us-ic-303626-dls-bb1.c.telia.net (62.115.36.38)  332.192 ms  205.536 ms
    100ge11-1.core1.dal1.he.net (184.105.64.222)  241.649 ms
 9  176.32.125.172 (176.32.125.172)  209.481 ms
    176.32.125.212 (176.32.125.212)  223.887 ms
    176.32.125.164 (176.32.125.164)  205.608 ms
10  176.32.125.169 (176.32.125.169)  205.849 ms
    176.32.125.150 (176.32.125.150)  274.887 ms
    176.32.125.167 (176.32.125.167)  230.285 ms
11  * 176.32.125.241 (176.32.125.241)  232.125 ms *
12  * * 54.240.229.175 (54.240.229.175)  231.710 ms
13  * 54.240.229.171 (54.240.229.171)  239.321 ms *
14  * * *
15  *^C

Traceroute times out but appears to be in the eastern United States (AWS).

Q1) Can I change to Sydney Australia?

Twitter

Waiting for an answer from Twitter.

Virginia is a long way away.

Let’s test the SSL

It’s all good apart from on weak cipher (“TLS_RSA_WITH_3DES_EDE_CBC_SHA (0xa) WEAK (112)“).

SSL

A shodan scan of the IP reveals an open port 80 and 443 (as expected, nothing out of the ordinary)

Pushing Changes

I ran this to push the app.

cd /Users/username/Desktop/heroku/node-js-getting-started
git push heroku masterCounting objects: 488, done.
Delta compression using up to 8 threads.
Compressing objects: 100% (367/367), done.
Writing objects: 100% (488/488), 231.76 KiB | 231.76 MiB/s, done.
Total 488 (delta 86), reused 488 (delta 86)
remote: Compressing source files... done.
remote: Building source:
remote: 
remote: -----> Node.js app detected
remote: 
remote: -----> Creating runtime environment
remote:        
remote:        NPM_CONFIG_LOGLEVEL=error
remote:        NPM_CONFIG_PRODUCTION=true
remote:        NODE_VERBOSE=false
remote:        NODE_ENV=production
remote:        NODE_MODULES_CACHE=true
remote: 
remote: -----> Installing binaries
remote:        engines.node (package.json):  8.9.1
remote:        engines.npm (package.json):   unspecified (use default)
remote:        
remote:        Resolving node version 8.9.1...
remote:        Downloading and installing node 8.9.1...
remote:        Using default npm version: 5.5.1
remote: 
remote: -----> Restoring cache
remote:        Skipping cache restore (not-found)
remote: 
remote: -----> Building dependencies
remote:        Installing node modules (package.json)
remote:        added 49 packages in 1.686s
remote: 
remote: -----> Caching build
remote:        Clearing previous node cache
remote:        Saving 2 cacheDirectories (default):
remote:        - node_modules
remote:        - bower_components (nothing to cache)
remote: 
remote: -----> Build succeeded!
remote: -----> Discovering process types
remote:        Procfile declares types -> web
remote: 
remote: -----> Compressing...
remote:        Done: 17.7M
remote: -----> Launching...
remote:        Released v3
remote:        https://fathomless-anchorage-#####.herokuapp.com/ deployed to Heroku
remote: 
remote: Verifying deploy... done.
To https://git.heroku.com/fathomless-anchorage-#####.git
 * [new branch]      master -> master

I ran this to ensure the app was running

heroku ps:scale web=1
Scaling dynos... done, now running web at 1:Free

I ran this to open the app

heroku open

This opened the apps URL in a browser.

A nice help page was pushed to my app.

I changed the contents of “node-js-getting-started/views/pages/index.ejs” and repushed.

git push heroku master
heroku ps:scale web=1
heroku open

It reported “Everything up-to-date“???

Repush

I tried to force a push (just in-case something on the server was changed)

git push --force heroku master
Everything up-to-date

???

Ok, let’s pull and see what’s new?

git pull heroku master
From https://git.heroku.com/fathomless-anchorage-#####
 * branch            master     -> FETCH_HEAD
Already up-to-date.

I edited “./index.js” and made the entry point “pages/index2.ejs” and tried to push and no luck.

Everything up-to-date

I tried running push under sudo too (no luck)

Googling revealed I can go to https://dashboard.heroku.com/apps/YOUR-APP/deploy/heroku-gi and see what the issue is.

I logged into the app and could not find how to delete or edit it?

How do I edit files

At this point, I would have just ssh’ed in and restarted the node process in pm2 or node on my own self-managed server and edited remote files locally in sublime on my local machine.

Personally, I like to know where files live and not delve into another designers management interface.

I’ll come back to this guide later until then I’ll stick with Digital Ocean or Vultr

Linking to your own Domain on Heroku

It looks like I can use custom domains via Namecheap to link a domain to a heroku app.

Or you can setup a domain sub domain to point to a heroku app with a DNS C Name record.

App Cost on Heroku

todo: After Hello World is deployed. Digital Ocean (is as low as $5 a month) or Vultr (is as low as $2.5 a month)

Donate and make this blog better

Ask a question or recommend an article

[contact-form-7 id=”30″ title=”Ask a Question”]

Revision History

v1.4 added custom domain, database, CNAME info

etc

Filed Under: Heroku Tagged With: app, Building, first, Heroku, on, your

Using Adobe XD and Platforma Web Wireframe Kit to prototype an iOS app

November 23, 2017 by Simon

I have blogged about using Adobe XD to prototype mobile apps. Recently, I found an attractive collection of ready to go Wireframe screens from Proforma to use alongside Apple UI Kit elements in Adobe XD

Check Out Platforma

Platforma has been in the industry for years providing developers with prototype products for Mobile, Web and HTML templates.  Check out https://greatsimple.io/ for other prototyping products.

You can buy (or try) versions of Platforma at https://platforma.ws/#buy Below are screenshots from the Bundle version.

Performa has loads of ready to go samples screens that you can use in Adobe XD like..

  • Start Screens
  • Sign up Screens
  • Walkthrough Screens
  • Loading Screens
  • Feed Screens
  • Activity Screens
  • Profiles Screens
  • Posts Screens
  • Chats Screens
  • Contacts Screens
  • Search Screens
  • Lists Screens
  • Settings Screens
  • Create Screens
  • Catalog Screens
  • Discover Screens
  • Products Screens
  • Shopping Carts
  • Check Out Screens
  • Filters Screens
  • Navigation Screens
  • Maps Screens
  • About Screens
  • Popovers Screens
  • Photos Screens
  • Media Screens
  • Social Screens
  • E-commerce Screens
  • Charts and More (there are over 100 screens)

Adobe XD, Platforma and iOS Prototypes

The post below will focus on creating iOS prototypes using Adobe XD and Platforma Wireframe kits.

Other posts will focus on creating Android, and Web Prototypes etc. After you purchase Platforma, you can download a zip file (I have the bundle) containing all related design files.

Tip: Save your activation code if you eceive one.

Download

Extract the Zip file.

Zip

Files are located in each products folder (I will focus on XD in iOS assets until I learn the others).

PLATFORMA BUNDLE FILES

Adobe XD iOS assets are in two files.

Adobe XD

You can now open either Platforma .xd file to view prototype elements available.

You may get a Fonts Missing dialogue (install the fonts and the error goes away).

fyi

  • I downloaded Roboto font from here
  • SF UI * font can be downloaded from here
  • Apple San Francisco Font from here.

All font packs are free, the Apple San Francisco font needs you to run an install wizard, SF UI needs you to download and install TTF file from GitHub, Roboto needs you to double-click on a number of TTF files to install them in your fonts library.

The fonts are now installed (verified in my fonts app on OSX).

Fonts

I am now free to open the iOS “Platforma for iOS – Categories.xd” file that came from Proforma.

Performa iOS Categories (Zoomed Out)

Oh my, there are loads of sample screens and elements you can use in an app prototype (I’d count them but I’d be here all day, I had to zoom out to 2.5% to see them all).Platforma iOS

Now time to open the second file (“Platforma for iOS – Demos.xd”)

Performa iOS Categories (Zoomed In on Maps)

I had a look at the sample “Maps” screens and they are amazing.

Maps

Performa iOS Demos (Zoomed Out)

Here is a complete zoomed out view of the “Platforma for iOS – Demos.xd” file.

Platforms settings 1

Performa iOS Demos (Zoomed in on Social Samples)

Here is a sample of some of the screens in the Social category in the “Platforma for iOS – Demos.xd” file.

Let’s Start an App Prototype in Adobe XD

I open the “./Platforma for iOS/XD/Platforma for IOS/Platforma for iOS – Categories.xd” and “./Platforma for iOS/XD/Platforma for iOS – Demos.xd” xd files that you downloaded from https://platforma.ws/

Also, start a new iOS blank project in Adobe XD.

New Project

I positioned windows so I could see all Adobe XD projects.

Windows

Tip: If you are using the Apple iOS (or Android etc) UI components then you can open them too (see my Adobe XD guide to see how to get the oficial iOS controls from Apple).

iOS Controls

Personally, I would suggest before you start prototyping that you have a “validated list” of things that you want to prototype (if you are designing a prototype for a client then ask them what they want). Check out the awesome http://joinagile.com/lean-and-mean-agile-podcast/ for tips on Collecting, grooming, prioritizing app tasks. Don’t waste time developing unwanted features. Manage tasks around Outcomes and not tasks. I have blogged about developing software and staying on track and how to get feedback for your ideas.

Also, I have a so you have an idea for an app graphic and blog posts on Atlaz.io BETA Project Management Tool For Cross-Functional Teams the Trello and Atlassian JIRA Killer? and How to develop software ideas. I would suggest you listen to the Lean and Mean Agile Podcast to get extra product backlog grooming, prioritization tips etc.

TIP: I use the MoSCoW method for capturing and prioritizing tasks.

snip from: https://en.wikipedia.org/wiki/MoSCoW_method
Must have
Requirements labelled as Must have are critical to the current delivery timebox in order for it to be a success? If even one Must have requirement is not included, the project delivery should be considered a failure (note: requirements can be downgraded from Must have, by agreement with all relevant stakeholders; for example, when new requirements are deemed more important). MUST can also be considered an acronym for the Minimum Usable Subset.
Should have
Requirements labelled as Should have are important but not necessary for delivery in the current delivery timebox. While Should have requirements can be as important as Must have, they are often not as time-critical or there may be another way to satisfy the requirement so that it can be held back until a future delivery timebox.
Could have
Requirements labelled as Could have are desirable but not necessary, and could improve user experience or customer satisfaction for little development cost? These will typically be included if time and resources permit.
Won’t have (this time)
Requirements labelled as Won’t have been agreed by stakeholders as the least-critical, lowest-payback items, or not appropriate at that time. As a result, Won’t have requirements are not planned into the schedule for the next delivery timebox. Won’t have requirements are either dropped or reconsidered for inclusion in a later timebox. (Note: occasionally the term Would like to have is used; however, that usage is incorrect, as this last priority is clearly stating something is outside the scope of delivery).

end snip.

Starting your Prototype in Adobe XD

Based on your MoSCoW list you can (I do) create empty screens ( I usually add a label in the top left indicating the screens MoSCoW status so I can prototype needed features now and start planning future versions later from the one prototype file). I am not a big fan of using multiple app prototype files.

Moscow Screens

Now you can copy and paste in example screens over the empty screens.

Within minutes you can have a nice mockup of your app using Adobe XD and Platforma assets.

Drag as needed, change as needed.

Design your app

Customizing sample screens

Of course, you can edit the sample screens and rename, add, remove or change individual items in Adobe XD (Nice work Platforma/Adobe). Ignore the Yellow “Should Have” on the screen below, it looks out of place but I get in the habit of adding a floating “Must Have”, “Should Have”, “Could Have” and Won’t Have” labels to screens.

Editing

Preview

You can preview the rough prototype in Adobe XD on your desktop or on a real mobile device.

Don’t forget to wire up screens to generally goto and return to the main screen.

Wire up a prototype

Or you can wire up individual screen elements to go to different screens. You will need to be in Prototype mode in XD first.

Button

If you saved to the Adobe Cloud you can now open the prototype app on the Adobe XD app on a mobile device (or simulate it in Adobe XD on the desktop). Open Adobe XD on your mobile device and open your project from your Adobe Creative Cloud folder.

Mobile app

You can now view fabulous looking application prototypes on a mobile device screen with minimal invested time and effort.

Testing

Conclusion

I am very impressed with the https://platforma.ws Wireframe Kit, I’d strongly recommend app developers buy a copy and use the pre-setup templates look impressive and will save you loads of time (no more messing with UI Kits to make app prototypes look good). I can’t wait to check out and review the other assets in the Full Platforma Bundle.

Read More

Still reading?

Read: Quick guide to using Adobe XD CC to design a prototype iOS app.

More to come.

Donate and make this blog better

Ask a question or recommend an article

[contact-form-7 id=”30″ title=”Ask a Question”]

Revision History

v1.0 Initial Post

etc

Filed Under: App, Customer, Design, Development, Feedback, iOS Prototype, Planning, Prototype, UI, UX Tagged With: adobe, an, and, app, iOS, Kit, Platforma, prototype, to, Using, web, Wireframe, XD

Installing Android Studio 3 and creating your first Kotlin Android App

November 11, 2017 by Simon

Below is my quick post showing how you can create your own Hello World Android app using the new Kotlin language on OSX. More will be added to this blog post over time.

What is Kotlin

Kotlin is a statically-typed programming language that runs on Java Virtual Machines (the syntax is not compatible with Java but interoperates with it).  Kotlin is Google’s default language for developing Android Android Apps. Kotlin is now the official language supported by Google for Android development. Kotlin v JAVA: http://androiddeveloper.galileo.edu/2017/10/16/kotlin-vs-java-what-is-the-difference/

The official Kotlin language page can be found here: https://kotlinlang.org/ (Wikipedia has a page here).

Kotlin has a “Try Kotlin” page here ( https://try.kotlinlang.org/ ) where you can the language out in a browser.  Android Studio 3 is the latest IDE from Google that allows you to develop apps in JAVA pr Kotlin for Android.

Learn Kotkin: Hello World Demo

Hello Wprls Demo

Kotlin Hello World Code:

/**
 * We declare a package-level function main which returns Unit and takes
 * an Array of strings as a parameter. Note that semicolons are optional.
 */

fun main(args: Array<String>) {
    println("Hello, world!")
}

fyi: Other Kotlin Code Examples:

  • Reading a name from the command line
  • Multi-Language Hello World
  • Object-Oriented Hello World
  • Using a For Loop
  • Using a While Loop
  • Sum
  • Strings
  • Data Classes
  • Properties
  • Etc

Kotlin Language Reference: http://kotlinlang.org/docs/reference/

Tutorials: http://kotlinlang.org/docs/tutorials/

Books: http://kotlinlang.org/docs/books.html

More Resources: http://kotlinlang.org/docs/resources.html


Installing Android Studio on OSX

You will need to install the latest Android Studio 3 IDE from the link below.  This will allow you to download the latest Android SDK, Android Emulator, tools and Documentation from Google.

Download Android Studio from here: https://developer.android.com/studio/index.html?utm_source=android-studio

You should now have a 750MB (or there about’s) file (called something like android-studio-ide-171.4408382-mac.dmg )

You are now ready to run the setup dmg and install the app.

Kotlin Downloaded

“Replace” Earlier Versions (if you had 1.x or 2.x installed)

Replace Android Studio

You may be asked to choose the default Android emulator ram size

Emulator Ram Size

Congratulations, Android Studio 3 should now be installed

Installed

Congratulations you now have the Android Studio 3 IDE Installed.

Android Studio Tips and Tricks: https://medium.com/@mmbialas/50-android-studio-tips-tricks-resources-you-should-be-familiar-with-as-an-android-developer-af86e7cf56d2

Android Studio 3 User Guide: https://developer.android.com/studio/intro/index.html

Official getting started guide: https://developer.android.com/training/basics/firstapp/index.html

Setting Android Studio Defaults

Don’t forget to download updates and set auto updates “to enabled” in the Android Studio preferences screen.

Android Studio Auto Updates

Goto the “SDK Manager” menu item under the “Tools” then “Android” menu.

SDK Manager

You can Download additional Android SDK versions, updates and emulator environments.  I would recommend you pre-download the Android 3.x to 8.x environments.

ADK API Versions

You can also download and create Emulated Android Devices in the Android Virtual Device (AVD) Manager menu.

Andoiud Emulator

You can choose an existing Android Device (emulated)

Choose Emulated Device

Create Your Own Virtual Device

You can also create your own Android virtual device (Emulated) for testing.

I have a physical Huawei Mate 9 device (for physical testing), I will set up a similar virtual device (but stick with 2GB ram instead of 4GB as my development Mac only has 8GB total ram).

AVD Create

You can choose an emulators device skin if you so desire. Many phone skins can be found online (e.g here, here and here). Samsung Developer page has a skins page here. Managing AVD user guide here: https://developer.android.com/studio/run/managing-avds.html. I don’t use emulator device skins as this uses much-needed memory and screen real estate.

When you are done configuring your virtual device image you may be prompted to download missing images (e.g  in my case I need to download API 27/ Android 7.1.1).

Download

Physical Device Setup (Enable Developer Mode)

You should always code on physical devices where possible (emulators are ok but have a handful of physical devices on hand to test on).  I find the emulator crashes a lot on me.

How to enable developer mode on a physical Android device: https://developer.android.com/studio/debug/dev-options.html.  When you have enabled developer mode you can enable advanced developer options (I like these options).

Dev Options

When you have a physical Android device setup and connected, you can choose to run the app on the physical device.

Run on device

Creating Your first Hello World Kotlin Project

By now you will have Android Studio 3 installed, Configured Updates, Configured an Emulator device and hopefully a real test device. Now you can open Android Studio and select.

1. “Start a New Android Studio Project”
2. Name your project (e.g “My Kotlin Test App 001”)
3. Ensure your company name is unique (e.g “com.fearby.testgithub001android”
4. Tick “Include Kotlin Support” (not ticked by default).

New Project

5. Click “Next“.
6.You will need to choose the minimum API and Android version to support. If you choose a new API you may limit the potential users that can run your app and if choose an old API you will limit the potential features.  In my case, I will choose 7.0 for my test project (but will choose 4.1 in public apps).  Click “Help me choose” to see the percentage of users and features in each API version.

Version

7. Clik “Next”

8. Choose “Empty Activity” and click “Next“.

9. Take note of Activity name of “MainActivity” and Layout Name of “activity_main” and click “Finish“.

Now that you have a new project you can start Emulatorkator (Tools, Android, AVD Manager then press Play next to your emulator of choice).

Emulator

10. Now click Run and choose the Emulator to start.

Run

Before we add a button to the test app, let’s add a Anko dependency to the project ( https://github.com/Kotlin/anko ) to make coding easier.

11. Open your “app/Gradle Scripts/build.gradle (Module: app)” node in the Android Project treeview.

12. View add the following line to the dependencies section (refer to https://github.com/Kotlin/anko and replace “0.10.2” with the version listed at thGitHubub site). Then click “Sync Now”.

// Anko Commons
compile "org.jetbrains.anko:anko-commons:0.10.2"

Anko

13. Goto “app/res/layout/activity_main.xml” (1) and add a button to the layout (2) and name the button (3)

Add Button

14. Goto “app/java/%projectname%/MainActivity” (1) and add the following two lines  (2)(3) below.

Add the following at the top of “MainActivity”

import org.jetbrains.anko.toast

Add the following in the “onCreate” function (ensure your button name is the same as you called it).

buttonhello.setOnClickListener { toast ("Hello World (www.fearby.com)") }

Wire up Button

15. You can now build and deploy the app to a device (or emulator, real devices are faster).

RunA

Add a Button to change activity screens

The official documentation on changing activity screens can be found here.

1. Rename the button from above from”Button” to ‘Hello World”
2. Add a new button can call it “buttonnextscreen” (set constraints if you wish to match the hello world button left and width).

Next Screen Button

3. Now you can add and a new target activity screen ( e.g Open your project in the treeview (1), select “New” (2), select “Activity” (3) and then choose the activity type you want (e.g “Empty Activity” (2) ).

New Activity Screen
4. Name the “Activity Name” and “Layout Name” and click “Next“.

More info on Kotlin fragments: https://www.raywenderlich.com/169885/android-fragments-tutorial-introduction-2

5. In “MainActivity.kx” I edited the following (time to use Anko Intents and not just Anko toast )

//import org.jetbrains.anko.toast
import org.jetbrains.anko.*

I also wired up the new “Next Activity” Button

buttonnextscreen.setOnClickListener {
     startActivity(intentFor<NextActivity>().singleTop())
}

Now you have wired up a button to change Activity Screens.  The Android back button will fire the previous screen so there is no need to wire up a  returning button (like on iOS).

Next Activity

This is the Next Activity screen that was called from a button (exciting eh).

Set and Read Textbox

After adding a textbox and button this is how I set and red text in a textbox control.

textbox.setText("Sample Text")
buttongettext.setOnClickListener{
    toast(textbox.text.toString())
}

Create, Set and Read Local Class

I added a button (ID) called “buttoncreateclass” and setup a “setOnClickListener” (in onCreate) to create a class, fill it then output the data from the class to three textboxes (“textfirstname”, “textsurname” and “textage”)

class Person(val Firstname: String, val Surname: String, var Age: Int) {}

buttoncreateclass.setOnClickListener {
    var cbob = Person("Bob", Surname = "Smith", Age = 41)

    // Read
    textfirstname.setText("Firstname: " + cbob.Firstname.toString())
    textsurname.setText( "Surnmae: " + cbob.Surname.toString())
    textage.setText("Age: " + cbob.Age.toString())
}

Adding Application Icons.

Read the official guidelines here: https://developer.android.com/studio/write/image-asset-studio.html

I use the free cions generator here: https://romannurik.github.io/AndroidAssetStudio/

Ensure you replace the following files (with your project closed)..

  • res/mipmap-hdpi/ic_launcher_round.png (72 x 72 px)
  • res/mipmap-hdpi/ic_launcher.png (72 x 72 px)
  • res/mipmap-hdpi/ic_launcher_round.png (72 x 72 px)
  • res/mipmap-hdpi/ic_launcher.png (72 x 72 px)
  • res/mipmap-xhdpi/ic_launcher_round.png (96 x 96 px)
  • res/mipmap-xhdpi/ic_launcher.png (96 x 96 px)
  • res/mipmap-xxhdpi/ic_launcher_round.png (144 x 144 px)
  • res/mipmap-xxhdpi/ic_launcher.png (144 x 144 px)
  • res/mipmap-xxxhdpi/ic_launcher_round.png (192 x 192 px)
  • res/mipmap-xxxhdpi/ic_launcher.png (192 x 192 px)

You may also need to remove the res/drawable XML files to prevents the automatically genrated im,ages from loading.

  • DELETE: “res/drawable/ic_launcher_background.xls”
  • DELETE: “res/drawable/ic_launcher_foreground.xls”

You may need to force a delete (Right Click then “Delete” then “OK” then “Delete Anyway“).

Force Delete

I had a number of errors related to removing references to the automatically generated images.

File “anydpi-v26/ic_launcher.xml” and “anydpi-v26/ic_launcher_round.xml” had this contents.

<?xml version="1.0" encoding="utf-8"?>
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
    <background android:drawable="@drawable/ic_launcher_background"/>
    <foreground android:drawable="@drawable/ic_launcher_foreground"/>
</adaptive-icon>

I replaced the contents of the file “anydpi-v26/ic_launcher.xml” and “anydpi-v26/ic_launcher_round.xml” with

<?xml version="1.0" encoding="utf-8"?>
<application>
    android:icon="@mipmap/ic_launcher"
    android:roundIcon="@mipmap/ic_launcher_round"
</application>

Then you will need to click the “Build” menu then “Clean Project” to remove references to the files.

“Build“, “Clean” results.

Executing tasks: [:app:assembleDebug]

Configuration 'compile' in project ':app' is deprecated. Use 'implementation' instead.
:app:preBuild UP-TO-DATE
:app:preDebugBuild UP-TO-DATE
:app:compileDebugAidl UP-TO-DATE
:app:compileDebugRenderscript UP-TO-DATE
:app:checkDebugManifest UP-TO-DATE
:app:generateDebugBuildConfig UP-TO-DATE
:app:generateDebugResValues UP-TO-DATE
:app:generateDebugResources UP-TO-DATE
:app:mergeDebugResources UP-TO-DATE
:app:createDebugCompatibleScreenManifests UP-TO-DATE
:app:processDebugManifest UP-TO-DATE
:app:splitsDiscoveryTaskDebug UP-TO-DATE
:app:processDebugResources UP-TO-DATE
:app:compileDebugKotlin UP-TO-DATE
:app:prepareLintJar UP-TO-DATE
:app:generateDebugSources UP-TO-DATE
:app:javaPreCompileDebug UP-TO-DATE
:app:compileDebugJavaWithJavac UP-TO-DATE
:app:compileDebugNdk NO-SOURCE
:app:compileDebugSources UP-TO-DATE
:app:mergeDebugShaders UP-TO-DATE
:app:compileDebugShaders UP-TO-DATE
:app:generateDebugAssets UP-TO-DATE
:app:mergeDebugAssets UP-TO-DATE
:app:transformClassesWithDexBuilderForDebug UP-TO-DATE
:app:transformDexArchiveWithExternalLibsDexMergerForDebug UP-TO-DATE
:app:transformDexArchiveWithDexMergerForDebug UP-TO-DATE
:app:mergeDebugJniLibFolders UP-TO-DATE
:app:transformNativeLibsWithMergeJniLibsForDebug UP-TO-DATE
:app:processDebugJavaRes NO-SOURCE
:app:transformResourcesWithMergeJavaResForDebug UP-TO-DATE
:app:validateSigningDebug
:app:packageDebug UP-TO-DATE
:app:assembleDebug UP-TO-DATE

BUILD SUCCESSFUL in 1s
26 actionable tasks: 1 executed, 25 up-to-date

Now you can build an APK with static icons (yes, that’s my face).

Icons

Read move on “realtime generated/adaptive” v “image” icons here: https://medium.com/@ianhlake/vectordrawable-adaptive-icons-3fed3d3205b5

Official guide on Adaptive Icons: https://developer.android.com/guide/practices/ui_guidelines/icon_design_adaptive.html

Displaying Alerts

Displaying a hard-coded option with Anko

alert("Coffee?", "Would you like another coffee?") {
    yesButton { toast("OK, go and get a coffee.") }
    noButton { toast("OK, go and get a glasss of water.") }
}.show()

Displaying a list with options with Anko

val fruit = listOf("Apple", "Banana", "Mango")
selector("Go..", fruit, { dialogInterface, i ->
    toast("Go: ${fruit[i]}.")
})

Making Phone Calls, Sending Text, Browing the web and sending Emails

Anko has some cool helper methods to allow you to send and share content.

As long as you add the appropriate buttons, text fields you can add these button listeners.

override fun onCreate(savedInstanceState: Bundle?) {
    ...

    buttonmainscreen.setOnClickListener {
        startActivity(intentFor<MainActivity>().singleTop())
    }

    buttonmakeacall.setOnClickListener {
        makeCall(textphonenumber.text.toString())
    }

    buttonsendatext.setOnClickListener {
        sendSMS(phonenumber2.text.toString(), textsendthistext.text.toString())
    }

    buttonbrowsetheweb.setOnClickListener {
        browse(texturl.text.toString())
    }

    buttonsharesometext.setOnClickListener {
        share(textsharethis.text.toString(), textsharethis2.text.toString() )
    }

    buttonsendanemail.setOnClickListener {
        email(textemail.text.toString(), textsubject.text.toString(), textbody.text.toString())
    }

}

Layout

Email

Background Async Calls

You can call background calls and then invoke the UI thread when the call has returned.

buttondoasync.setOnClickListener {

    fun runLongTask(): String {
        Thread.sleep(3000)
        return "Waited 3 seconds"
    }

    doAsync {
        var result = runLongTask()
        uiThread { toast(result) }
    }
}

App Manifest Permissions

Edit the file “app/src/mainAndroidManifest.xml” and add the following two lines above the “<applications” node

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
<uses-permission android:name="android.permission.INTERNET"/>

View all permission options here: https://developer.android.com/reference/android/Manifest.permission.html

By default your app will not ask for permissions (unless you set them).

Permissions

Downloading data from the Internet (API Endpoint)

Add the following to a button to make a anetwork call.

buttoncallapiinthebackground.setOnClickListener {
    doAsync {
        val result = URL("https://www.yoursite.com/api/yourappname/v1").readText()
        uiThread {
            longToast("Request performed: " + result)
        }
    }
}

Example Result:

Request performed: {"API Status": "OK"]

Updating your Android Studio IDE (do this often)

Don’t forget to download updates (and enable auto-updates) in the Android Studio IDE.  At the start of this draft blog post, I installed Android Studio 3.0 (Four hours later a large 1.3 GB sized update was available), I had to download many smaller updates too.

AS Updates

This is a frequent update that would not go away for me.

Update Gradle

Copying the app to an Android Device.

Once you have enabled debug mode you can copy apps to and from the physical device.  You can build an APK by going to the “Build” then “Build APK’s” menu and build the file to your project folder (e.g “/Users/simon/AndroidStudioProjects/MyKotlinTestApp001/app/build/outputs/apk/debug/app-debug.apk“). You can then copy this file to your Android device (via the Android File Transfer app) and you can now run the app anytime you want away from your Mac.

File Transfer

Also before you copy and unsigned apps to your test device tyoiu will need to enable developer mode then enable the running of apps from “unknown sources“.

Unknown Sources

If you have any security apps instaled like Sophos you will be told that yiour app has a low rating.

Low Reputation

APK living on your device 🙂

Device

The Android Studio also has a real device debugger.

Android Device Monitor

Monitor output from a show stats from a real device

Debug

Android Security 101 (you need to know this)

You can define network configuration per these instructions: https://developer.android.com/training/articles/security-config.html

Coming from developing iOS and desktop apps I decided on researching the current state of Android Security. I would strongly suggest you watch this video from Marcos Placona ( https://twitter.com/marcos_placona Developer Evangelist @ Twilio).

Takeaway’s from this video

  • Use Certificate Pinning with the library –  http://square.github.io/okhttp/ in Android for network calls. Read my post on Beyond SSL with Content Security Policy, Public Key Pinning etc to set it up on a Vultr Server.
  • Your app will be decompiled (with tools like Apktool) so don’t store passwords
  • Use encryption for in-app strings.
  • Read: https://androidsecurity.info/
  • Storing your secure information in the NDK
  • Check if your app is running on an emulator (is it being decompiled?)
  • Check if your app is debuggable (has the manifests been changes)
  • Never trust devices
  • Check your apps certificate  (has in been disassembled and recompiled)
  • Consider using DexGuard Pro
  • Use the Google SafetyNet API
  • Test your devices with the Compatibility Test Suite from Google.
  • Use environment variables or config files too laod API tokens etc.
  • Monitor miss-use (attacks, break-ins or API hits) early.

My Suggestions

  • Secure your Ubuntu server (info here and here).
  • Use an HTTPS SSL Certificate
  • Use Certificate Pinning
  • Ask for app token/keys from your server and keep in memory.
  • Use OAuth 2 to secure sessions
  • Use short timeouts (or expire on use) on tokens with sensitive data.
  • Call upstream objects form API to prevents client-side attacks.

Deploying your app to the Android/Google Play store

To publish an app to the Google Play store you will need to create a Google Play Developer Account, pay $25 USD and you are free to publish an app on the Google Play store. Read more here: https://play.google.com/apps/publish/

Publishing an app is as simple as filling in the blanks in the publish app screen.

Store

Troubleshooting

  • You will need a  fast system with at least 8MB of ram (16GB is ideal).
  • Apple XCode users will find Android Studio 3 slow and unstable (so backup your project often).
  • Building apps take a long time so be prepared to wait for build and deploys to devices.
  • Update warnings are aplenty, get used to them.

Read More

Kotlin Community: http://kotlinlang.org/community/

Android Studio ~ Android Central Blog: https://www.androidcentral.com/tag/android-studio

Huawei Developer Page: http://developer.huawei.com/en/

Samsung tips on using Android Studio: http://developer.samsung.com/galaxy/emulator-skin/guide#tips

Create a custom emulator skin https://developer.android.com/studio/run/managing-avds.html#skins

Follow Android Dev on Twitter: https://www.twitter.com/AndroidDev

Read: https://androidsecurity.info/

An Introduction to Kotlin: https://code.tutsplus.com/tutorials/an-introduction-to-kotlin–cms-24051

Reddit: https://www.reddit.com/r/androiddev/

Create Non XML based layouts (with ANKO):

Kotlin v JAVA: http://androiddeveloper.galileo.edu/2017/10/16/kotlin-vs-java-what-is-the-difference/

Read more about Android Studio 3: http://www.technoblogpost.com/android-studio-3-0/

Jetbrains Android Studio Guidelines: https://www.jetbrains.com/help/idea/2016.2/general-guidelines.html

Donate and make this blog better


Ask a question or recommend an article
[contact-form-7 id=”30″ title=”Ask a Question”]

v1.57 added Async calls, app icon, misc screenshots, Anko alert, email, sms, share code, permissions, network download etc.

Filed Under: Android, App, Kotlin Tagged With: 3, and, Android, app, creating, first, Installing, Kotlin, Studio, your

Infographic: So you have an idea for an app

October 31, 2017 by Simon

I created this graphic as I was asked by multiple people how to develop an app. This does not include tips on coding but many people with the non-technical prerequisites to building an app.

I hope this graphic helps someone (It’s my first infographic/decision flow image, feedback welcome).

So You Have an Idea For An App: Graphic

Click for a larger version.

Infographic-So-you-have-an-idea-for-an-app-v1-3

Standalone Image URL’s

v1.3 (22nd November 2017)
  https://fearby.com/wp-content/uploads/2017/10/Infographic-So-you-have-an-idea-for-an-app-v1-3.jpg
v1.2 (4th Nov 2017, Added requirements and MoSCoW): 
  https://fearby.com/wp-content/uploads/2017/10/Infographic-So-you-have-an-idea-for-an-app-v1-2.jpg
v1.1 (1st Nov 2017, Fixed Typos): 
  https://fearby.com/wp-content/uploads/2017/10/Infographic-So-you-have-an-idea-for-an-app-v1-1.jpg

todo: Things to add Issues to fix in 1.4:
 - Add user personas and Epic, Story and Task stages.
 - How to capture good stories (and validated ideas (landing pages/interviews/problems/value/painpoints)

Define the problem(s) (pain points)

Before you start coding, do list your app requirements (problem’s to solve (pain points)).

Atlassian JIRA or Trello can help with this. I personally use (and like) Atlaz.io (now Hygger), I reviewed the BETA here).

Using Trello lists are also a simple way to capture tasks/ideas.

ListMore on these Read more here also read my Atlaz.io BETA Preview here.

Nothing beats pen and paper too.

Notepad

Moscow Prioritization

Must-Have Should-Have, Could-Have and Won’t-have are buckets you should sort ideas into. If you have trouble moving items away from Must to Should, Could or Won’t then assign a fictitious monetary value to spend on each item and that will help you decide what is more important.

Read this MoSCoW Method article at Wikipedia: https://en.wikipedia.org/wiki/MoSCoW_method

Managing MoSCoW tasks on paper is OK if you do not want to use planning software.

More

Read my guide on how to prototype apps with Adobe XD guide here.  You can also Prototype a Web app with Platforma (review here).

Read my post on how to develop software and stay on track.

Research

Do research your idea for market fit/need, competition, complexity, legal and validate ideas early. It’s best to find out early that Google will quote $60,000+ TAX a year to allow you to use Google map’s in your app early, then you can use https://www.mapbox.com for $499 a year.

Do you have competition?

Some people say “don’t develop an app that already exists”. Why would you develop a new Uber app? Henry Ford did make a new transportation mode when people were happy with horses, other car manufacturers like Tesla are moving in on the space so don’t be discouraged.

Landing Page

A landing page with a signup form (Newsletter and Register Interest) form is a good way to validate ideas and get feedback early (I would suggest you use a free Mainchimp signup form, a generated website with Platforma on a $5/m server for quick results). There is no point coding and launching to crickets.

Do you have an app Prototype or Mock-Up?

This is very important and easy step.  Programs like Adobe XD CC  (read my guide here) and Balsamiq can help you prototype an app, Platforma can help you prototype web apps.

Wire up a prototype

Drag and Drop

Have you validated your idea (app) with end-users?

If you don’t do this you are mad.  Watch this video to see lessons learned from Trades Cloud.

Is this app idea a hobby (passion)?

This can help you limit costs and expectations.  Cheap serves exist (read here and here).

Do you have time to develop/manage this?

Developing and managing an app and planning (paying for) development cycle can be time-consuming and mentally draining.

Can you code?

Do you need to hire developers or learn to code?  Blog post coming soon on how to hire coders.

Do you have funds?

Having funds on hand to set up and build an app is very important.

Do you want to hide developers (or get Venture Capital)?

This can help you get moving but you will have to give away a slice of the profits and or IP, managing mentors and VC’s can be tiresome.

Have you set failure criteria (post-mortem)?

Read this page on lessons learned from over 200 startup failures, save your favourites.  Having realistic goals and limits is a wise idea, do stop when you reach preset limits.

Do you have a business case?

There is plenty of business case generator template’s,  you will want to document some of the following.

  • What is your apps Purpose – App X will be..
  • What is your Mission Statement – App X will..
  • Who are your Target Customers – Retail..
  • Who are the Early Adopters – Retail..
  • What Problems does your app solve – App X will..
  • What Milestones will your app go through – iOS, Android, Apple TV, Web etc..
  • What Existing solutions exist – App: A, B and C..
  • How does your app Solve your customer’s problems (pain points) – App X will..
  • How will your app Find customers – Word of Mouth, Referrals, Advertisements?
  • What is your Revenue model – Sales, Ad’s, Subscriptions?
  • What is your apps Goal statement – App X will hit X users in X?
  • What are your apps Failure points – If app X does not reach X or monthly costs reach Y….
  • What is your Marketing message – App X will..
  • What is your apps Metrics – iOS, Android, Apple TV apps..
  • What is your Unfair Advantage – Why will you succeed over others?

Are you using a project management methodology?

Proven Methodology can help you develop software and stay on track, software like Atlaz, JIRA or Trello are highly recommended tools. Capturing ideas and processing feedback in tools is very important.

Before you code (or hire coders) use source code versioning software like GitHub and Bitbucket (guides here and here).  You want to retain the code and insist on owning it.

Product Goal

Simon Sinek has a good video on companies (or Products) being in a finite or infinite game.

Are you in full control of your development stack?

If you are not a developer you may not care if you are in control, but you will if there are issues with hired developers or issues with service providers.  I moved from CPanel to self-managed servers, moved from IBM Cloudant to Digital Ocean to AWS then Vultr servers where I can have full control or scalability, features, security and costs.

Can you forecast the costs?

Lowering cost and boosting performance is important and having spare money is a good thing.

I read recently that  Telsla is burning through $6,000 a minute and is forecast to need something like 2 billion dollars in the next 2 years. Software as Service platforms will drain your budget quick (they do take on some risk and maintenance tasks), is this worth it?

Mark Fedin (CEO and Co-founder at Atlaz) has a great post on the topic of viability Stop Dabbling At Startups .

Are you using the right tech?

Don’t be afraid of changing tech along the way, you may start with MySQL and move to MongoDB, Redis, Oracle ot MSSQL database servers etc.

Do you have systems to capture customer feedback?

Self-explanatory, you are solving customer problems, right? You will pivot in the first year (trust me).

What is your revenue/sales model?

If you don’t know how to make money then don’t make an app (apps are expensive to code and maintain).

Are you prioritizing task?

I have blogged about this before, do use the tools to stay on track.

Funny Bit

Project Mangement LolProject Mangement Lol

Donate and make this blog better


Ask a question or recommend an article
[contact-form-7 id=”30″ title=”Ask a Question”]

v1.5 Fixed typos and fixed CDN link issue.

v1.4 Updated the graphic to version v1.3.

Short (Article): https://fearby.com/go2/so/

Short (Image): https://fearby.com/go2/so-img/

Filed Under: Advice, Android, App, Atlassian, AWS, Cost, Development, Digital Ocean, Feedback, Git, GitHub, JIRA, Marketing, MongoDB, MySQL, Project Management, Redis, Scalable, Software, Tech Advice, Trello, VM, Vultr Tagged With: an, app, for, have, idea, Infographic, So, you

Create your first Hello World Electron app on OSX

September 27, 2017 by Simon

Electron allows you to build cross-platform desktop apps with JavaScript, HTML, and CSS based on NodeJS. Electron’s home is https://electron.atom.io

Electron will allow you to build a web app and package it up to run locally with HTML and bootstrap or more advanced widgets like https://www.jqwidgets.com/ or ExtJS. Marc Fearby is creating a Git starter project for Electron with Sencha here. You can happily develop a local web app and have back-end available by an APIs if need be (read my guide on setting up and configuring a server and securing it and installing an SSL certificate).

Nodejs

Electorn requires NodeJS, please confirm your node version (in my case I have an old version installed)

node --version
v0.12.4

Run the node installer from https://nodejs.org/en/download/

Electron Hello

Now I have the newer version on OSX

node --version
v6.11.3

Create a folder for you Electron project (e.g  ~/Documents/ElectronApps/HelloWorld ).

Project Home

Navigate to that folder in the terminal

cd ~/Documents/ElectronApps/HelloWorld/
pwd
/Users/simon/Documents/ElectronApps/HelloWorld

Now type: npm init

npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (HelloWorld) helloworld
version: (1.0.0) 0.0.1
description: Hello World in Electron
entry point: (index.js) app.js
test command: 
git repository: 
keywords: electron,hello,world
author: Simon Fearby
license: (ISC) 
About to write to /Users/simon/Documents/ElectronApps/HelloWorld/package.json:

{
  "name": "helloworld",
  "version": "0.0.1",
  "description": "Hello World in Electron",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "electron",
    "hello",
    "world"
  ],
  "author": "Simon Fearby",
  "license": "ISC"
}

Installing Electron

sudo npm install electron --save-dev --verbose

verbose was added to allow you to see as the install could take  a while

...
Downloading electron-v1.7.8-darwin-x64.zip
[======>                                      ] 16.4% of 48.41 MB (319.96 kB/s)
...

Create a  javascript file as specified in your package.json

sudo nano app.js

Contents of app.js

const elcetron = require('electron');
const app = electron.app;

const path = require('path');
const url = require('url');

const BrowserWindow = electron.BrowserWindow;
var mainWindow;

app.on('ready', function() {

        mainWindow = newBrowserWindow({width: 1024, height: 768, backgroudColor: '#ffffff'});

        mainWindow.loadURL(url.format({pathname: path.join(__dirname, 'index.html'), protocol: 'file:', slashes: true } ));

});

Update the package.json to include a start command (electron .)

{
  "name": "helloworld",
  "version": "0.0.1",
  "description": "Hello World in Electron",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron ."
  },
  "keywords": [
    "electron",
    "hello",
    "world"
  ],
  "author": "Simon Fearby",
  "license": "ISC",
  "devDependencies": {My contents
    "electron": "^1.7.8"
  }
}

Create an index.html file

sudo nano index.html

Contents

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World...</title>
</head>

<body>
Hello World...
</body>

</html>

Now we can start the app.

App

Electron Package Manager

You can install the Electron Packager to make Apps for desktop OS’s. Read more at https://github.com/electron-userland/electron-packager

Install the electron-packager module into your existing project.

sudo npm install electron-packager --save-dev

If you receive the error “-bash: electron-packager: command not found” try and install the packager globally

sudo npm install electron-packager -g

Now we will package the app for OSX

sudo electron-packager .
Packaging app for platform darwin x64 using electron v1.7.8
Wrote new app to /Users/simon/Documents/ElectronApps/HelloWorld/helloworld-darwin-x64

I can now uninstall the electron packager from my project as it is now installed globally

sudo npm remove electron-packager

Building apps on OSX

Build an OSX App

electron-packager .

Rebuild an OSX app

sudo electron-packager . --overwrite

This will build an OSX app

OSX App

Building apps on Windows

1) Ensure nodejs is installed (reboot if required)

node win

2) Test your app (npm start)
NPM Start

3) Install Electron Packager Globally

npm install electron-packager -g

4) Don’t forget to install Electron on Windows

npm install electron --save-dev --verbose

5) You can now package a Windows executable (TIP: Run the command as an Administrator to prevent write errors).

electron-packager .

Win EXE

Advanced electron-packager commands

Build and specify a build number

electron-packager ./ helloworld --build-version=0.0.1

Build ap with icons

electron-packager . --overwrite --arch=x64 --platform=darwin --prune=true --out=release-builds --icon=assets/icons/mac/icon.icns

Building linux app

electron-packager . --overwrite --icon=assets/icons/png/icon.png --platform=linux --arch=x64 --prune=true --out=release-builds

Use sites like https://iconverticons.com/online/to generate icns files and place them in “assets\icons\mac\icons.icns”

View electron-packager issues here: https://github.com/electron-userland/electron-packager/issues

More to come..

Donate and make this blog better




Ask a question or recommend an article
[contact-form-7 id=”30″ title=”Ask a Question”]

Revision History

v1.0 Initial Post (24th Sep 2017)

etc

Filed Under: App, Web Design, Website Tagged With: app, electron, NodeJS, web app

  • Go to page 1
  • Go to page 2
  • Go to Next Page »

Primary Sidebar

Poll

What would you like to see more posts about?
Results

Support this Blog

Create your own server today (support me by using these links

Create your own server on UpCloud here ($25 free credit).

Create your own server on Vultr here.

Create your own server on Digital Ocean here ($10 free credit).

Remember you can install the Runcloud server management dashboard here if you need DevOps help.

Advertisement:

Tags

2FA (9) Advice (17) Analytics (9) App (9) Apple (10) AWS (9) Backup (21) Business (8) CDN (8) Cloud (49) Cloudflare (8) Code (8) Development (26) Digital Ocean (13) DNS (11) Domain (27) Firewall (12) Git (7) Hosting (18) HTTPS (6) IoT (9) LetsEncrypt (7) Linux (20) Marketing (11) MySQL (24) NGINX (11) NodeJS (11) OS (10) PHP (13) Scalability (12) Scalable (14) Security (44) SEO (7) Server (26) Software (7) SSH (7) ssl (17) Tech Advice (9) Ubuntu (39) Uncategorized (23) UpCloud (12) VM (44) Vultr (24) Website (14) Wordpress (25)

Disclaimer

Terms And Conditions Of Use All content provided on this "www.fearby.com" blog is for informational purposes only. Views are his own and not his employers. The owner of this blog makes no representations as to the accuracy or completeness of any information on this site or found by following any link on this site. Never make changes to a live site without backing it up first.

Advertisement:

Footer

Popular

  • Backing up your computer automatically with BackBlaze software (no data limit)
  • How to back up an iPhone (including photos and videos) multiple ways
  • Add two factor auth login protection to WordPress with YubiCo hardware YubiKeys and or 2FA Authenticator App
  • Setup two factor authenticator protection at login on Ubuntu or Debian
  • Using the Yubico YubiKey NEO hardware-based two-factor authentication device to improve authentication and logins to OSX and software
  • I moved my domain to UpCloud (on the other side of the world) from Vultr (Sydney) and could not be happier with the performance.
  • Monitor server performance with NixStats and receive alerts by SMS, Push, Email, Telegram etc
  • Speeding up WordPress with the ewww.io ExactDN CDN and Image Compression Plugin
  • Add Google AdWords to your WordPress blog

Security

  • Check the compatibility of your WordPress theme and plugin code with PHP Compatibility Checker
  • Add two factor auth login protection to WordPress with YubiCo hardware YubiKeys and or 2FA Authenticator App
  • Setup two factor authenticator protection at login on Ubuntu or Debian
  • Using the Yubico YubiKey NEO hardware-based two-factor authentication device to improve authentication and logins to OSX and software
  • Setting up DNSSEC on a Namecheap domain hosted on UpCloud using CloudFlare
  • Set up Feature-Policy, Referrer-Policy and Content Security Policy headers in Nginx
  • Securing Google G Suite email by setting up SPF, DKIM and DMARC with Cloudflare
  • Enabling TLS 1.3 SSL on a NGINX Website (Ubuntu 16.04 server) that is using Cloudflare
  • Using the Qualys FreeScan Scanner to test your website for online vulnerabilities
  • Beyond SSL with Content Security Policy, Public Key Pinning etc
  • Upgraded to Wordfence Premium to get real-time login defence, malware scanner and two-factor authentication for WordPress logins
  • Run an Ubuntu VM system audit with Lynis
  • Securing Ubuntu in the cloud
  • No matter what server-provider you are using I strongly recommend you have a hot spare ready on a different provider

Code

  • How to code PHP on your localhost and deploy to the cloud via SFTP with PHPStorm by Jet Brains
  • Useful Java FX Code I use in a project using IntelliJ IDEA and jdk1.8.0_161.jdk
  • No matter what server-provider you are using I strongly recommend you have a hot spare ready on a different provider
  • How to setup PHP FPM on demand child workers in PHP 7.x to increase website traffic
  • Installing Android Studio 3 and creating your first Kotlin Android App
  • PHP 7 code to send object oriented sanitised input data via bound parameters to a MYSQL database
  • How to use Sublime Text editor locally to edit code files on a remote server via SSH
  • Creating your first Java FX app and using the Gluon Scene Builder in the IntelliJ IDEA IDE
  • Deploying nodejs apps in the background and monitoring them with PM2 from keymetrics.io

Tech

  • Backing up your computer automatically with BackBlaze software (no data limit)
  • How to back up an iPhone (including photos and videos) multiple ways
  • US v Huawei: The battle for 5G
  • Check the compatibility of your WordPress theme and plugin code with PHP Compatibility Checker
  • Is OSX Mojave on a 2014 MacBook Pro slower or faster than High Sierra
  • Telstra promised Fibre to the house (FTTP) when I had FTTN and this is what happened..
  • The case of the overheating Mac Book Pro and Occam’s Razor
  • Useful Linux Terminal Commands
  • Useful OSX Terminal Commands
  • Useful Linux Terminal Commands
  • What is the difference between 2D, 3D, 360 Video, AR, AR2D, AR3D, MR, VR and HR?
  • Application scalability on a budget (my journey)
  • Monitor server performance with NixStats and receive alerts by SMS, Push, Email, Telegram etc
  • Why I will never buy a new Apple Laptop until they fix the hardware cooling issues.

Wordpress

  • Replacing Google Analytics with Piwik/Matomo for a locally hosted privacy focused open source analytics solution
  • Setting web push notifications in WordPress with OneSignal
  • Telstra promised Fibre to the house (FTTP) when I had FTTN and this is what happened..
  • Check the compatibility of your WordPress theme and plugin code with PHP Compatibility Checker
  • Add two factor auth login protection to WordPress with YubiCo hardware YubiKeys and or 2FA Authenticator App
  • Monitor server performance with NixStats and receive alerts by SMS, Push, Email, Telegram etc
  • Upgraded to Wordfence Premium to get real-time login defence, malware scanner and two-factor authentication for WordPress logins
  • Wordfence Security Plugin for WordPress
  • Speeding up WordPress with the ewww.io ExactDN CDN and Image Compression Plugin
  • Installing and managing WordPress with WP-CLI from the command line on Ubuntu
  • Moving WordPress to a new self managed server away from CPanel
  • Moving WordPress to a new self managed server away from CPanel

General

  • Backing up your computer automatically with BackBlaze software (no data limit)
  • How to back up an iPhone (including photos and videos) multiple ways
  • US v Huawei: The battle for 5G
  • Using the WinSCP Client on Windows to transfer files to and from a Linux server over SFTP
  • Connecting to a server via SSH with Putty
  • Setting web push notifications in WordPress with OneSignal
  • Infographic: So you have an idea for an app
  • Restoring lost files on a Windows FAT, FAT32, NTFS or Linux EXT, Linux XFS volume with iRecover from diydatarecovery.nl
  • Building faster web apps with google tools and exceed user expectations
  • Why I will never buy a new Apple Laptop until they fix the hardware cooling issues.
  • Telstra promised Fibre to the house (FTTP) when I had FTTN and this is what happened..

Copyright © 2023 · News Pro on Genesis Framework · WordPress · Log in

Some ads on this site use cookies. You can opt-out if of local analytics tracking by scrolling to the bottom of the front page or any article and clicking "You are not opted out. Click here to opt out.". Accept Reject Read More
GDPR, Privacy & Cookies Policy

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may have an effect on your browsing experience.
Necessary
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Non-necessary
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.
SAVE & ACCEPT