Nothing to see...

A simple blog about all things in the world that is ridikulouse.

Technological steps, are man kinds greatest achievements

Not a Fighter, but a lover of Tech.

Love of the internet

The Internet is the final frontier for open connected networks, it promotes speech and advances knowledge for any mere person. The internet is fast becoming a need rather a want, and it is recognised by the UN as a necessity for the modern person.

Photography

Photography is more than just Art and expression, it is the manipulation of the light and provokes emotion and memories.

Have a look around

The articles on this blog represent my thoughts and views at the time of writing, I can always change my views through further education...please don't hold me against my views. Some of the articles have been written to assist anyone else with similar issues - it also helps me to remember. Hope you get something out of this.

Friday, August 10, 2018

Trying out Ionic 4


Ionic 4 is now in Beta which brings breaking changes to your application - you can read about the benefits that Ionic 4 brings to the table here. This article will be a living document where I'll cover my experiences with Ionic 4, so please be prepared for new information to be added to this article and information to be removed (if it is not valid). .

Ionic 4 Documentation

Since Ionic 4 is in early beta there is very little documentation available and the official documentation is no where near as complete as what I was used to with Ionic 3. Since I mainly use Angular for my frontend development, the main change with the official documentation is the lack of angular-ish documentation. The main reason as I feel the reason behind this is because Ionic 4 is intended to be framework agnostic, allowing it to be used with a wide variety of frameworks.

Ofcourse, this means it makes my life harder. At present the documentation for Ionic 4 is in beta, however, the documentation site is badly missing search features. Which makes migration for early adopters a nightmare of manually reading through documentation. If the ionic team are reading this, I would encourage you to apply search facilities for the Ionic 4 documentation to allow a smoother transition between Ionic 3 to 4.

Installation 

To get started with Ionic 4 you simply have to get the CLI updated to v4.

npm install -g ionic

Next, to use the new templates you need to use --type=angular at the end. I.e

ionic start myapp --type=angular


Migration from v3 to v4

If you are that way inclined, you start migrating your v3 project to v4. The way that I had migrated to v4 is manual migration, instead of using tools. This allowed me to understand the breaking changes and what was changing from v3 to v4. This is where the reliance of the community, stackoverflow, and the documentation came in handy.

To do the mannual migration, you need to first copy your current project to a new directory. Next use the CLI to create a new project template :

ionic start <myapp> --type=angular

Once your template of your app has been created using Ionic 4, you can start by slowing migrating your project across. To do this I opened two copies of my IDE (in my case I use Visual Studio Code) and generate the pages/providers/services etc...

Please note... Ionic does provide a migration linter that can warn and sometimes fix the errors.

Breaking Changes


Where's the Providers

In Ionic 4 along with Angular 6, providers as knew them are now called services (as we knew them), so instead of doing :

ionic g provider <providername>

use

ionic g service <servicename>

What happened to ionic-angular import ? 

The import of NavController etc... from ionic-angular now needs to be imported from @ionic/angular. Therefore your import statement will be :

import { NavController } from '@ionic/angular';

What happened to IonicPage ?

I used IonicPage to do lazy loading in Ionic v3, this is no longer required. See navigation below.

Is NavParams still required ? 

NavParams can still be imported from @ionic/angular however, I haven't found that I have needed to use it. Instead I had rolled my own singleton service pass data between components, services, and pages.

What happened NavController ? 

NavController is still what you use to move from one page to another, however, in Ionic v3 we used .push and pop() method (push to move forward, and pop to move back). This is theoretically still the same, however, the navController has changed to .goForward() and goBackward. The changes also means that the navigation is handled using angular routing.

Check out src/app/app-routing.module.ts if you used the cli to generate the pages then a route will automatically generated within app-routing.module.ts. This will be an entire article by itself, however, for the time being to get yourself moving quicking in your migration check out what the cli and the template have generated for the routes and familiarise yourself with it.

The NavController.goForward method takes a string as a path which is the routing path.

So if you have route about  in your routes, then you would use NavController.goForward as

navController.goForward('/about');

Where is the back button in the pages ? 


In Ionic 3, the back button is automatically added to the pages. When you are manually migrating from v3 to v4 you may have noticed that the pages that you are generating doesn't have a back button. You will need to manually add these in if you want them (I'd guess you do).

My buttons don't render properly 


In Ionic 4 the html element for a button is ion-button, in v3 you may have had something like this :

<button ion-button (click)="myclick()">Click My Button </button>

this button should now be written as

<ion-button (click)="myclick()">Click My Button</ion-button>








Sunday, February 25, 2018

VisualStudio Code Hide JS Files

If you are working with Visual Studio Code and working with Typescript you'll soon notice that you are cluttered with JS files that are equivalent to your typescript file (these are the compiled/interpreted versions).

To get some order in your workflow, its often to get them out of the way and you can do this by editing the settings. To do this first open settings via File > Preferences > Settings  or use the keyboard combination CTRL + ,

Once your settings is opened simply place the following lines

"**/*.js": {"when": "$(basename).ts"},
"**/*.map": {"when": "$(basename).map"}

My whole file looks like this :

{
"files.exclude": {
"**/.git": true,
"**/.DS_Store": true,
"**/*.js": {"when": "$(basename).ts"},
"**/*.map": {"when": "$(basename).map"}
}
}


This doesn't hide all js files, only the files which have a typescript file.

Saturday, January 27, 2018

Possible solutions to getting react native app built

This document is a work in progress, I'm documenting the errors and pitfalls of developing in react native under Ubuntu. This is documented in the hope that someone finds this useful or if I need to refer to this again at some point in the future.

I am by no means an expert in this, I'm documenting what I have encountered and what had worked for me. I only advise that you can try these out at your own risk, as I cannot accept any responsibility.

Issue: Could not determine java version from '9.0.1'.


Solution :
From your project directory navigate to the directory "android/gradle/wrapper" and edit the file gradle-wrapper.properties and update the distributionUrl to the following :

distributionUrl=https\://services.gradle.org/distributions/gradle-4.3-rc-2-all.zip

Issue: Sdk location not found


Solution : From your project directory navigate to the android directory and edit the file local.properties (create it if it isn't there)

sudo nano local.properties

then enter the following line and replace <username> with your username

sdk.dir = /home/<username>/Android/Sdk

Issue : Failed to notify project evaluation listener.  javax/xml/bind/annotation/XmlSchema


Solution : Downgrade from Java 9 to Java 8

sudo apt-get remove oracle-java9-installer
sudo apt-get install oracle-java8-installer


if it comes back with an error for oracle-java7-installer then run the following command:

sudo dpkg -P oracle-java7-installer
sudo apt-get -f install 


Issue : ERROR: JAVA_HOME is set to an invalid directory: /usr/lib/jvm/java-9-oracle


Solution : 

find the java location using 

readlink -f $(which java)

copy the path without the bin/java at the end and run this command and paste the path 

export JAVA_HOME="<path>"

Issue: The SDK Build Tools revision (23.0.1) is too low for project ':app'. Minimum required is 25.0.0

Solution : 

from your project file goto android directory and edit build.gradle file and insert the following :

subprojects { subproject ->
    afterEvaluate{
        if((subproject.plugins.hasPlugin('android') || subproject.plugins.hasPlugin('android-library'))) {
            android {
                compileSdkVersion 25
                buildToolsVersion "25.0.1"
            }
        }
    }
}

Issue: /bin/sh: 1: adb: not found


Solution : 
Update your path to point to your platform tools


Issue: Double Tap R to reload - How? 


Soution : I used CTRL + M, and menu shade will be displayed where you can choose to reload. 



Tuesday, January 9, 2018

React Native CLI Commands

This will be updated with react-native cli commands that I come across as my reference:

Creating a project 

react-native init <project_name>

i.e react-native init helloworld

The first time you run this command it will take a little while to download all the dependencies for your project.

Run App in IOS 

Execute this in your project directory (i.e cd helloworld)

react-native run-ios

Run App in Android 

Execute this in your project directory (i.e cd helloworld)

react-native run-android



.


Developing with React Native on Ubuntu 17.04


I wanted to try out developing mobile applications using react native. React Native, if you are not aware is a framework that was developed by facebook that provides a mechanism to write both Android and IOS applications using javascript as a native application.

Unlike a cordova application which is essentially a hybrid application that essentially runs in a webview, a React Native app runs native with native performance and native flexibility all while using javascript.

Furthermore, React Native also has a vibrant community of developers who are happy to help and plenty of libraries.

My development system is Ubuntu 17.04, and although there are plenty of documentation on how to get this to work in Windows and Mac the information for Ubuntu was quite scarce. For this reason I decided to write this to help someone out.



Install NodeJs



sudo apt-get install -y build-essential

curl -sL https://deb.nodesource.com/setup_4.x | sudo -E bash -
sudo apt-get install -y nodejs

Install NPM

Install Watchman


Please see below of possible errors that you may encounter and how to resolve them. 

Install Flow

get the latest version from github (see here for the appropriate link)

wget https://github.com/facebook/flow/releases/download/v0.63.1/flow-linux64-v0.63.1.zip
unzip flow-linux64-v0.63.1.zip
sudo mv flow /usr/local/bin/flow


Install React Native 

This may have been a painful process to get to here, but this is the final step. To install react native you can install this via npm. 

sudo npm install -g react-native-cli



./autogen.sh possible errors
When you run ./autogen.sh you may get the following : 
your system lacks libtoolize

then you need to install libtool 

sudo apt-get install libtool 

and, just to be sure you may also need to install the following:

sudo apt-get install libtool m4 automake

Continue ./configure and make. 

make possible errors
Openssl development packages
When you run make you may also come across the following:


ContentHash.cpp:13:25: fatal error: openssl/sha.h: No such file or directory

 #include <openssl/sha.h>


You will need to install openssl dev, to do this you will need to execute the following :
sudo apt-get install libssl-dev 

I received a conflict in the packages and their dependencies. 

The following packages have unmet dependencies:
 libssl-dev : Depends: libssl1.0.0 (= 1.0.2g-1ubuntu11) but 1.0.2g-1ubuntu11.3 is to be installed
              Recommends: libssl-doc but it is not going to be installed
E: Unable to correct problems, you have held broken packages.

To resolve this I had to use the help of aptitude to work out a solution : 
sudo su
aptitude install libssl-dev

It provided a recommendation which I had declined and pressed no, and then it provided another recommendation that suited what I required.

The following NEW packages will be installed:
  libssl-dev{b} libssl-doc{a} zlib1g-dev{a} 
0 packages upgraded, 3 newly installed, 0 to remove and 230 not to upgrade.
Need to get 2,586 kB of archives. After unpacking 10.5 MB will be used.
The following packages have unmet dependencies:
 libssl-dev : Depends: libssl1.0.0 (= 1.0.2g-1ubuntu11) but 1.0.2g-1ubuntu11.3 is installed
The following actions will resolve these dependencies:

     Keep the following packages at their current version:
1)     libssl-dev [Not Installed]                         



Accept this solution? [Y/n/q/?] n
The following actions will resolve these dependencies:

     Downgrade the following packages:                                   
1)     libssl1.0.0 [1.0.2g-1ubuntu11.3 (now) -> 1.0.2g-1ubuntu11 (zesty)]



Accept this solution? [Y/n/q/?] y
The following packages will be DOWNGRADED:
  libssl1.0.0 
The following NEW packages will be installed:
  libssl-dev libssl-doc{a} zlib1g-dev{a} 
0 packages upgraded, 3 newly installed, 1 downgraded, 0 to remove and 230 not to upgrade.
Need to get 3,666 kB of archives. After unpacking 10.5 MB will be used.
Do you want to continue? [Y/n/?] y
Get: 1 http://archive.ubuntu.com/ubuntu zesty/main amd64 libssl1.0.0 amd64 1.0.2g-1ubuntu11 [1,080 kB]
Get: 2 http://archive.ubuntu.com/ubuntu zesty/main amd64 zlib1g-dev amd64 1:1.2.11.dfsg-0ubuntu1 [173 kB]
Get: 3 http://archive.ubuntu.com/ubuntu zesty/main amd64 libssl-dev amd64 1.0.2g-1ubuntu11 [1,352 kB]               
Get: 4 http://archive.ubuntu.com/ubuntu zesty/main amd64 libssl-doc all 1.0.2g-1ubuntu11 [1,061 kB]                 
Fetched 3,666 kB in 8s (450 kB/s)                                                                                   
Preconfiguring packages ...
dpkg: warning: downgrading libssl1.0.0:amd64 from 1.0.2g-1ubuntu11.3 to 1.0.2g-1ubuntu11
(Reading database ... 312366 files and directories currently installed.)
Preparing to unpack .../libssl1.0.0_1.0.2g-1ubuntu11_amd64.deb ...
Unpacking libssl1.0.0:amd64 (1.0.2g-1ubuntu11) over (1.0.2g-1ubuntu11.3) ...
Selecting previously unselected package zlib1g-dev:amd64.
Preparing to unpack .../zlib1g-dev_1%3a1.2.11.dfsg-0ubuntu1_amd64.deb ...
Unpacking zlib1g-dev:amd64 (1:1.2.11.dfsg-0ubuntu1) ...
Selecting previously unselected package libssl-dev:amd64.
Preparing to unpack .../libssl-dev_1.0.2g-1ubuntu11_amd64.deb ...
Unpacking libssl-dev:amd64 (1.0.2g-1ubuntu11) ...
Selecting previously unselected package libssl-doc.
Preparing to unpack .../libssl-doc_1.0.2g-1ubuntu11_all.deb ...
Unpacking libssl-doc (1.0.2g-1ubuntu11) ...
Setting up libssl1.0.0:amd64 (1.0.2g-1ubuntu11) ...
Processing triggers for libc-bin (2.24-9ubuntu2.2) ...
Processing triggers for man-db (2.7.6.1-2) ...
Setting up libssl-doc (1.0.2g-1ubuntu11) ...
Setting up zlib1g-dev:amd64 (1:1.2.11.dfsg-0ubuntu1) ...
Setting up libssl-dev:amd64 (1.0.2g-1ubuntu11) ...
Once this is done, jump out of su by using exit.

I ran make again and ran into the following error: 

  CXXLD    watchman

watchman-ContentHash.o: In function `watchman::ContentHashCache::computeHashImmediate(watchman::ContentHashCacheKey const&) const':
/home/prad/watchman/ContentHash.cpp:65: undefined reference to `SHA1_Init'
/home/prad/watchman/ContentHash.cpp:78: undefined reference to `SHA1_Update'
/home/prad/watchman/ContentHash.cpp:81: undefined reference to `SHA1_Final'
collect2: error: ld returned 1 exit status
Makefile:1566: recipe for target 'watchman' failed
make[1]: *** [watchman] Error 1
make[1]: Leaving directory '/home/prad/watchman'
Makefile:1101: recipe for target 'all' failed
make: *** [all] Error 2


so make sure to run ./autogen.sh and then ./configure and then make again

Python package requirements

I then ran into another error: 
running build_ext
building 'pywatchman.bser' extension
creating build
creating build/temp.linux-x86_64-2.7
creating build/temp.linux-x86_64-2.7/pywatchman
x86_64-linux-gnu-gcc -pthread -DNDEBUG -g -fwrapv -O2 -Wall -Wstrict-prototypes -fno-strict-aliasing -Wdate-time -D_FORTIFY_SOURCE=2 -g -fdebug-prefix-map=/build/python2.7-IY_Jmw/python2.7-2.7.13=. -fstack-protector-strong -Wformat -Werror=format-security -fPIC -I/usr/include/python2.7 -c pywatchman/bser.c -o build/temp.linux-x86_64-2.7/pywatchman/bser.o
pywatchman/bser.c:31:20: fatal error: Python.h: No such file or directory
 #include <Python.h>
                    ^
compilation terminated.

You need to install python-dev using 

sudo apt-get install python-dev 

if you run into conflicts then use aptitude again to get this resolved:
sudo su
aptitude install python-dev
exit

I ran into a problem with aptitude not installing python-dev based on the recommendation. So I had to reject the original recommendation and then aptitude suggested to downgrade the packages, so I tried that - and it worked.

and then run ./autogen.sh and then ./configure and then make again.