Getting Started with React Native: My Experience

Getting Started with React Native: My Experience

What is React Native? React is a JavaScript library for building user interfaces and React Native is a framework for native mobile development using JavaScript and React. It is maintained by Facebook and others. I started with the Getting Started guide.

I already had the latest Python and Node.js (on Windows 10 – Insider Preview). Next I installed the React Native CLI – npm install -g react-native-cli. Then downloaded and installed Android Studio. Didn’t imagine the install file would be 1.8 GB. A key note from the guide – React Native, however, requires the Android 6.0 (Marshmallow) SDK. I created a projects folder and ran the command – react-native init MyProject. Got the following warning

‘yarn’ is not recognized as an internal or external command, operable program or batch file.
Installing react-native…
Consider installing yarn to make this faster: https://yarnpkg.com

Went to the yarn website and this is what they say

Yarn caches every package it downloads so it never needs to download it again. It also parallelizes operations to maximize resource utilization so install times are faster than ever.

From their install page they reference Chocolatey. The React-Native guide also does. After the project files are created, it says run the command react-native run-android. From here the troubleshooting begins. I ran the command and got the following error message

ERROR: JAVA_HOME is not set and no ‘java’ command could be found in your PATH.

Please set the JAVA_HOME variable in your environment to match the
location of your Java installation.
Could not install the app on the device, read the error above for details.
Make sure you have an Android emulator running or a device connected and have
set up your Android development environment:
https://facebook.github.io/react-native/docs/android-setup.html

The command to start the AVD Manager is android avd but I got this error (I’m using PowerShell)

android : The term ‘android’ is not recognized as the name of a cmdlet, function, script file, or operable program.

So I had to find the folder containing android.bat and add it to PATH and restart PowerShell. Turned out to be C:\Users\hassan\AppData\Local\Android\sdk\tools but then this

The “android” command is no longer available.
For manual SDK and AVD management, please use Android Studio.
For command-line tools, use
tools\bin\sdkmanager.bat and tools\bin\avdmanager.bat

Added bin to the path. Restarted PowerShell. Command works but there is no GUI and it’s all command line. The GUI can be started from Android Studio – Tools > Android > AVD Manager. I also noticed that there is a Firebase option in the Tools menu. In creating the AVD I saw this message – Recommendation. HAXM not installed, with the option to install. Once I created my AVD I could close Android Studio because I could start the emulator from the command line. This link describes how to control the emulator from the command.

Remember the missing JAVA_HOME from above. Well turns out Android Studio comes with OpenJDK and the path for the JRE was C:\Program Files\Android\Android Studio\jre. Added that to my Environment Variables in Windows.

The command to run the emulator is – emulator -avd YOUR_AVD_NAME. Once the emulator was running I went back to the command to launch the app in the emulator – react-native run-android. It did some downloading, installing and building which took a few minutes and that was it. Share your thoughts with us in the comments below.

Troubleshooting Problems with Installing Seaborn

Troubleshooting Problems with Installing Seaborn

So I came across this problem in the Caribbean Developers facebook group and decided to challenge myself by trying it myself and see what my experience would be like. The objective is to install the Seaborn Python library and also using the offline install. The person was using pip install seaborn and getting an error that included the following

Connection to pypi.python. org timed out.

This is likely to be a proxy problem as indicated here but I continued with what I set out to do. I eventually got Seaborn installed but I had to use some unofficial Windows binaries. These are the problems I encountered and what I did to solve them. I am using Windows 10 Insider Preview, Visual Studio 2017 and (the latest for Windows) Python 3.6.0

Microsoft Visual C++ 14.0 is required. Get it with “Microsoft Visual C++ Build Tools

I went into the Visual Studio installer and added the items related to C++

PermissionError: [WinError 5] Access is denied: ‘c:\\program files (x86)\\python36-32\\Lib\\site-packages\\numpy’

I opened the command prompt as administrator

RuntimeError: Broken toolchain: cannot link a simple C program

I used the Developer Command Prompt for VS 2017 (instead)

numpy.distutils.system_info.NotFoundError: no lapack/blas resources found

I installed numpy+mkl and then scipy from here (this is unofficial and without warranty or support).¬†The next step would be to figure out what Seaborn is used for and give it a try. Also I will try to figure out if there is an official or maybe better way to get this done. I had also installed¬†VCForPython27 and¬†cmake-3.8.0-rc2-win64-x64 but I don’t think those made a difference.

Zero to App: Developing with Firebase: My Experience

Zero to App: Developing with Firebase: My Experience

When I came across carnival-compass.com¬†I asked them what technologies they used to develop this. The response was, it uses Firebase, Google App Engine, Go, Polymer and Material Design Lite (MDL). Stuff that I’ve never used before and so I promised to look at these and blog about it.

So where do I start? I googled and came across this very useful video – Zero to App: Develop with Firebase – Google I/O 2016. I will quickly touch on some of the terms mentioned in the video (firstly)

REST –¬†REpresentational State Transfer. A style of software architecture for distributed systems. (Also see¬†this video)

Middleware –¬†Middleware is sometimes called plumbing because it connects two sides of an application and passes data between them.

JSON – JavaScript Object Notation) is a lightweight data-interchange format.

Tree database – A hierarchical database model is a data model in which the data is organized into a tree-like structure.

Firebase can be described as being suited to development of collaborative real-time apps. If anyone knows how they came up with the Firebase name, let me know. Let’s see how I manage in going from zero to app by following the video linked to earlier. So I downloaded the index.html from below the video and deleted all the javascript and CSS and modified to create a starting page that looked like this.

Zero to App- Developing with Firebase- My Experience 1

It’s a feedback system where tourist can submit their feedback to be actioned. As I watched the video, I added back the pieces of code needed, modified it and learned how it worked. One of the first things I noticed was that my API key and other database information would be exposed in HTML source. I read that I should not be alarmed. There is authentication, database rules and coding among other things. (Security & Firebase Rules).

The first error I encountered was

Uncaught ReferenceError: database is not defined at index.html:20

The Firebase console only gives you this

var app = firebase.initializeApp(config);

but the sample code had this

var app = firebase.initializeApp(config),
database = app.database(),
auth = app.auth(),
storage = app.storage();

Also from the  Chrome browser menu > More tools > Developer Tools > Console, I was able to view my errors as I went along. Unto the next error now.

Uncaught TypeError: Cannot read property ‘addEventListener’ of null
at index.html:29

The sample code had the javascript code wrapped in the below code which makes sense. Wait for the document to be loaded.

document.addEventListener(‘DOMContentLoaded’, function() {

At this point I am feeling happy because I am making progress. Unto to the next error now.

FIREBASE WARNING: set at /feedback/-CODE failed: permission_denied

O {code: “auth/operation-not-supported-in-this-environment”, message: “This operation is not supported in the environment‚Ķchrome-extension and web storage must be enabled.”}

By default authentication is required to use the Firebase database. For the purposes of following the demo and writing this blog post, I disabled this by modifying the rule as follows. You do get a warning when you do this : Your security rules are defined as public, anyone can read or write to your database.

{
“rules”: {
“.read”: true,
“.write”: true
}
}

Then finally my messages were being written to the database.

Zero to App- Developing with Firebase- My Experience 2

I love being able to develop quickly using well documented and discussed technologies. Firebase provides functionality out of the box and I don’t have to worry about scaling. If you can authenticate, manage session and do CRUD easily out of the box, that’s a good place to start. Imagine what Firebase will handle in the future. One neat thing shown in the video is that if you lose connectivity, the messages are queued in memory until connectivity is restored and this happens out of the box. Anonymous accounts and Firebase storage are also useful. Share your thoughts on Firebase and your experience with us in the comments below.

My Experience With Visual Studio 2017

My Experience With Visual Studio 2017

Microsoft recently made available Visual Studio 2017 for download. I decided to give it a try. I like to see how easy it is to get started, what hurdles might present themselves, see what’s new and how this latest version handles. At the same time I downloaded and installed SQL Server 2016 SP 1. I am going to build a simple CRUD desktop app.

One of the things I noticed was .NET Core for cross platform development. However, this is currently only available for console, library and ASP.NET development. The setup file for Visual Studio 2017 is small and downloads the needed files based on your selections. I downloaded the single developer Community Edition. I browsed Twitter to get a sense of what others were saying. One article said it was faster and leaner. Another article described it as slimmer and nimbler. Some third party tools were announcing compatibility with the new version. One person complained that his attempt at creating a Xamarin Form blank project failed. Another person said it works great but he only uses it for basic stuff.

So what’s new in Visual Studio 2017? I found these two links (here and here) useful in answering this question. Also this YouTube video. Improvements include better performance, uses less memory, smarter user experience, better support for Azure development, interact easily with Git, added readability with Structure Visualizer, new Exception Handler, Run to Click, live editing and improvements for mobile development among other things. Also, I read about the built-in configurable style rules and that is really useful.

From my experience and generally Microsoft products work well together. I created my database and tables and created a login and gave it permissions. However I was getting the following error when trying to login and connect.

TITLE: Connect to Server
——————————
Cannot connect to MYSERVER.
——————————
ADDITIONAL INFORMATION:

Login failed for user ‘MyUser’. (Microsoft SQL Server, Error: 18456)

I found out that the reason for this was that I did not enable SQL Authentication. I had opted for the Express installation for the purposes of this blog post. From Management Studio, right click server and select properties. Under Security then Authentication then select SQL Server and Windows Authentication mode (if you are using SQL Server authentication like me).

When troubleshooting that error I decided I was going to delete and recreate the user and encountered this error

TITLE: Microsoft SQL Server Management Studio
——————————

Drop failed for User ‘MyUser’. (Microsoft.SqlServer.Smo)

——————————
ADDITIONAL INFORMATION:

An exception occurred while executing a Transact-SQL statement or batch. (Microsoft.SqlServer.ConnectionInfo)

——————————

The database principal owns a schema in the database, and cannot be dropped. (Microsoft SQL Server, Error: 15138)

To find out which schema is affected run the following query

SELECT name FROM sys.schemas WHERE principal_id = USER_ID(‘MyUser’)

Find the schema in object explorer under Security and change the owner e.g. back to dbo.

In creating one table I forget to set the Primary Key and got the following error using the automatically generated Grid View – Update requires a valid UpdateCommand when passed DataRow collection with modified rows. I set the primary key and I believe I had to refresh the table in the data source.

The last problem I had was that I couldn’t remember how I was able to drag the table over to the form to automatically create the Data Grid together with the Binding Navigator. Turns out I dragged it from the Data Sources window. If this window is not visible go to View – Other Windows – Data Sources. Once that was done I removed the unwanted columns from the Grid through the collection and changed one column in the Grid to a dropdown box. Not bad for a few hours of work. What’s your thoughts on Visual Studio 2017 and what has your experience been like?