DEV Community: Jarod Smith

Not able to call REST API on Android, but it works with iOS and Web App

Jarod Smith — Tue, 20 Oct 2020 14:36:47 +0000

During the development of a recent mobile app, I was retrieving data using a rest api. The web app was working fine and displaying the data. When I deployed to the Android device, I was receiving no data and the following error when calling the api:

Error Code: 0

Message: Http Failure response for [rest api url]

0 Unknown Error

I then deployed to my iPhone and everything worked fine. I was pulling the data back fine and displaying the list of items.

Then I remembered that since this app (which is in beta) was accessing the api using http, not https. I know, I know…it’ll move to https eventually. So that meant I needed to add the following to the android platform entry in the config.xml.

<edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application" xmlns:android="http://schemas.android.com/apk/res/android">
   <application android:usesCleartextTraffic="true" />
</edit-config>

This tells Android it’s ok to access data over non-secure (cleartext) traffic.

But…that didn’t work either. That’s weird. Why not? I’ve seen it work just fine in the past, so it was odd.

Ugh. So what I decided to do was remove the android platform, then re-add it, and do a new android build.

Whammy! It works now. I still need the edit-config entry, but apparently, there was something wrong/weird with my previous build files.

The post Not able to call REST API on Android, but it works with iOS and Web App appeared first on JarodMS.

My Dividend Meter

Jarod Smith — Thu, 19 Mar 2020 22:31:45 +0000

I recently completed a web app and thought I’d share a little bit more information about it.

I’ve long been interested in dividend stocks and have used a tool in the past based on an Excel spreadsheet. I’ve turned this into a web app that can be dynamically updated with no need for spreadsheets, macros or manual setup. MVP is setup and working with more features and automation coming soon.

Check it out here: https://mydividendmeter.com/

This app was built with Angular, Firebase, Google Cloud Functions, and a MongoDB database.

The stock data is being retrieved from IEX Cloud’s freemium API at https://iexcloud.io/. this is a great service and allows beginners to get started with some basic API’s. If I get more traffic, I will definitely need to upgrade.

The Backend – Firebase

Firebase Authentication – allows for users to signup with either their Google account or an email address.
Cloud Firestore – Stores the users preferences and stock choices. Stock prices aren’t stored here, just the portfolio of the user in Collection. This includes Ticker Symbol and Stock Count. User Info includes things like Income Goal and subscription type.
Google Cloud Functions – Used to retrieve custom stock data information from the MongoDB. Note: This was an interesting part to me that I will hopefully write about in the future. I have a custom build process so that when I use the functions in my local dev environment, I access a local MongoDB. When I deploy to GCP, I use the cloud mongoDB Atlas instance. This switch happens automatically with the deploy so I don’t have to manually change any code.

The Frontend – Angular

All pages and the menus are built using Angular. This includes the form input. Ng-Bootstrap is used for styling.
Custom AuthGuard used to limit access to certain pages

The post My Dividend Meter appeared first on JarodMS.

LoadingController example showing “Loading…” message

Jarod Smith — Tue, 26 Nov 2019 15:16:40 +0000

For longer running operations (e.g., data requests) it might be nice to show the user that you are loading their data or performing a long running action. For this we will use the LoadingController to show a simple message while we are retrieving a list of nearby shows from our service.

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

constructor(private loadingCtrl: LoadingController, 
            private showsService: ShowsService) { }

updateShows() {
    this.loadingCtrl.create({ message: 'Loading shows...' }).
      then((res) => {
        res.present();
        this.showsService.getShows()
          .subscribe((data: any) => {
            this.shows = data;
            res.dismiss();
        });
      });
  }

In your constructor, be sure to inject the LoadingController.

Note: The method updateShows() is actually called during a different point in my code, but where/when is not important to this example.

If the service call is really fast then the “Loading” message may not appear at all. When it does show up, here is what it looks like.

http://www.jarodms.com/wp-content/uploads/2019/11/Loading-Shows.mp4

This is a really basic example. There are a few options for setting the loading indicator and more information for that can be found in the Ionic documentation: https://ionicframework.com/docs/api/loading

The post LoadingController example showing “Loading…” message appeared first on JarodMS.

Example Angular 8 with NgRx and Redux DevTools

Jarod Smith — Thu, 03 Oct 2019 04:57:29 +0000

This was a fun little example and can be used as a template to get started with other projects using Angular 8, NgRx, and Ionic 4.

Here’s what is used:

Angular 8
NgRx Store 8.3.0
NgRx Store DevTools 8.3.0
For fun, Ionic 4.7.1

Redux DevTools in action

To build and run this example, clone the GitHub repo here: https://github.com/jarodms/ionic4-angular8-ngrx-example

You will also need to install the Redux DevTools Chrome extension:

Thanks to https://alligator.io/angular/ngrx-store-redux-devtools/ for the Redux DevTools setup info.

The post Example Angular 8 with NgRx and Redux DevTools appeared first on JarodMS.