Forem: Jacob Hunsaker

Flutter - deploying your app to Play Store

Jacob Hunsaker — Thu, 29 Jul 2021 06:12:26 +0000

I've had some luck to study and work with flutter these days. Flutter is a Google's UI kit, made for cross-platforms, meaning that with just one set of codes, it can be used to run in Android, iOS, and Web. Pretty neat, right?

Anyways, I've been hitting my keyboard here and there, and was lucky enough to create two simple apps and deploy it on both Play Store and App Store. Flutter has a pretty nice documentation, so you can follow that directly. However, if you're like me, who understands better by reading/watching at somebody who does it then this post will do. Today, I'll be sharing my experience on how I did it with some tips alongside (assuming you know the basics of flutter).

This post will discuss how to deploy an app to Play Store. If you're interested in how to publish an app on App Store, follow this link

I've used Android Studio to develop in flutter, and Visual Studio should be work the same. You should create a Play Console account and pay a one-time $25 to activate the account for publishing to work.

Android

1. Add a launcher icon.

Let's first start off by setting a launcher icon. This can be done, thanks to romannurik, at this site. I'll name the icon, "icon_logo.png". Once you've created what the launcher icon, create an assets folder in your project directory and put your icon in it.
Now let's be more technical. We'll be using one of flutter packages called flutter_launcher_icons to change the app icon. In your pubspec.yaml file, add/update the following lines appropriately. The latest version for flutter_launcher_icons was 0.9.0 in my case. Remember that indentation is very important for yaml files.

dev_dependencies:
  flutter_launcher_icons: "^0.9.0"

flutter_icons:
  android: "launcher_icon"
  ios: true
  image_path: "assets/icon_logo.png"

And then, run this command in terminal at your project directory and your app launcher icon will change.

flutter pub clean && flutter pub get && flutter pub run flutter_launcher_icons:main

2. Change the name of the App & Bundle.

We'll be running some terminal commands to make this happen, using a flutter package called rename. You can set your app name to whatever you want, with any language. your bundleId can also be anything, but the typical format is com.companyname.appname.

flutter pub global activate rename
flutter pub global run rename --appname YourAppName
flutter pub global rename --bundleId com.company.appname

3. key.properties

Now let's create a file called key.properties in the android directory, in the same level as local.properties. Inside, copy and paste the following four lines of code and adjust according to your wants. storePassword and keyPassword are usually the same. the value for storeFile can change to wherever you put your keystore in the next step.

storePassword=pw
keyPassword=pw
keyAlias=upload
storeFile=../app/upload-keystore.jks

4. Generating key.

This section is divided into two, depending on whether your developing device is Windows or Mac.

Windows

Copy and adjust the following code to your appropriate directories. Run it on cmd. First address is where your java keytool lies, and the second address after -keystore is where you want to download the key, as well as its name.

C:\\"Program Files"\Android\\"Android Studio"\jre\bin\keytool -genkeypair -v -keystore C:\Users\Administrator\upload-keystore.jks -storetype JKS -keyalg RSA -keysize 2048 -validity 10000 -alias upload

Mac

It's easier for Mac users, since you can simply just copy and paste the following code to the terminal and you're set.

keytool -genkey -v -keystore ~/upload-keystore.jks -keyalg RSA -keysize 2048 -validity 10000 -alias upload

Next thing I would suggest you do is to move the key to where your app resides: inside android/app.

5. Update .gitignore

Since we've now added key.properties and our key into the app, we don't want those to be uploaded into GitHub. In our .gitignore file inside the android directory, you can simply add key.properties and app/upload-keystore.jks to prevent that from happening.

6. Update AndroidManifest and build.gradle

In your android/src directory, there are three AndroidManifest.xml files. In the one in main, make sure that the following codes are added. Remember that indentations are very important in xml files.
Add the following before the android block:

   def keystoreProperties = new Properties()
   def keystorePropertiesFile = rootProject.file('key.properties')
   if (keystorePropertiesFile.exists()) {
       keystoreProperties.load(new FileInputStream(keystorePropertiesFile))
   }

   android {
         ...
   }

Find and replace the buildTypes block with the following:

   signingConfigs {
       release {
           keyAlias keystoreProperties['keyAlias']
           keyPassword keystoreProperties['keyPassword']
           storeFile keystoreProperties['storeFile'] ? file(keystoreProperties['storeFile']) : null
           storePassword keystoreProperties['storePassword']
       }
   }
   buildTypes {
       release {
           signingConfig signingConfigs.release
       }
   }

One thing I've noticed is, when you leave the buildType to release, debugging won't work. Hence, when you're done with releasing, return it back to signingConfigs.debug so that you can debug and develop.

7. Review your app.

Read through the documentation to see if you didn't miss any app-breaking mistakes to be fixed.

8. Create app bundle.

We are almost done! Now that our app is ready to be deployed, we will create an app bundle to upload to Play Console. Remember to run the following code in the project directory.

flutter build appbundle

Your app bundle will now be located at [project]/build/app/outputs/bundle/release/app.aab.

9. Play Console.

At the Play Console, create a developer account and create a new app. Upload your app bundle you've created above at the Production tab. Once you do that, Play Store is great in telling what needs to be done to successfully publish an app. Fill in all of the information until you can submit for approval. Once it is approved, your app will be deployed to Play Store.

10. Updating your app.

After editing or adding functionalities to your app, you'll have to update the version of the app. Play Store won't accept the same version number to be uploaded. Therefore, we have to go to pubspec.yaml and update the version of your app. Flutter documentation for version control is somewhat confusing. Basically, 1.0.0 is the version number and the number after + is the build number. Whenever there is a minor update, you should update the version as the following: 1.0.1+2. The next iteration will be 1.0.2+3, and so forth. Then, you'll build the app again and create another app bundle to post on Play Console. You can now add another version there.

That sums up on how to publish an app on Play Store for flutter apps. If you're also interested in how to publish an app on App Store, follow this link

If there are things I could improve on, please don't hesitate to let me know! I'm all ears :)

-JH
LinkedIn | Github

Flutter - deploying your app to App Store

Jacob Hunsaker — Thu, 29 Jul 2021 06:12:13 +0000

Anyways, I've been hitting my keyboard here and there, and was lucky enough to create two simple apps and deploy it on both Play Store and App Store. Flutter has a pretty nice documentation, so you can follow that directly. However, if you're like me who understands better by reading/watching at somebody who does it, then this post will do. Today, I'll be sharing my experience on how I did it with some tips alongside (assuming you know the basics of flutter).

This post will discuss how to deploy an app to App Store as iOS. If you're interested in how to publish an app on Play Store, follow this link

Publishing an app to App Store requires Xcode, so you need to use a Mac device. You should also create an Apple Developer account and enroll in the Apple Developer Enrollment Program, which costs $99/year, for publishing to work.

iOS

1. App & BundleId Naming.

We'll be running some terminal commands to change the name of the app, using a flutter package called rename. You can set your app name to whatever you want, with any language. your bundleId can also be anything, but the typical format is com.companyname.appname.

flutter pub global activate rename
flutter pub global run rename --appname YourAppName
flutter pub global rename --bundleId com.company.appname

2. Podfile.

In the flutter project/ios directory, open a file named Podfile. Uncomment line 2, and change the iOS platform target to whichever is required for your app. '9.0' should be sufficient for most cases.
At the bottom of podfile, update the block for post_install to the following and match the 'IPHONEOS_DEPLOYMENT_TARGET' to the version you chose for the line 2.

post_install do |installer|
  installer.pods_project.targets.each do |target|
    flutter_additional_ios_build_settings(target)
    target.build_configurations.each do |config|
      config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '9.0'
    end
  end
end

You can then click on 'Open iOS module in Xcode' to open the project in Xcode. If you're opening the project from Xcode, open project/ios directory to open Runner.xcworkspace file.

3. Runner configuration.

In the general tab, make sure all of the values are correct. We've changed the name and bundleId at step 1, so the Display Name, Bundle ID should have changed accordingly. Make sure the Version and Build is same as found in pubspec.yaml. Version would be the first three numbers (i.e. 1.0.0) and the build would be the number after the '+' sign. Set the iOS Version in Deployment Info to the one you set on step 2.
In the Signing & Capabilities tab, make sure 'Automatically manage signing' is marked, and select your team. If you already have an App Store Developer Account, it will automatically show.

4. Info.plist configuration.

This section is quite simple, just make sure the Bundle display name and Bundle name is correct.

5. Update the launcher icon.

Thanks to romannurik, at this site, you can create an icon of your design. Once you do create one, Apple requires an iconset, so go to link and create an iconset with the icon you've created. Once you download the iconset, there should be a folder named Assets.xcassets, which contains another folder, but with the name AppIcon.appiconset.
Now go back to Xcode and on the left panel, you should be able to find a folder named Assets.xcassets. It contains two files: AppIcon and LaunchImage. Delete AppIcon and drag/drop the Appicon.appiconset you downloaded. Now you have an iconset of your icon!

6. Identifier.

Now let's head to identifiers. In the identifiers tab, you should be able to see a number of identifiers that you've created (none, if you haven't). We'll create a new identifier for our app. Since flutter only supports iOS and macOS, do not check tvOS, and fill in the rest as you've created in the previous steps. Make sure that the Bundle ID is the same as you've set in the previous steps.

7. App Store Connect

Let's now actually create an app in App Store by adding it in (App Store Connect)[https://appstoreconnect.apple.com/apps]. Name and BundleID should match the Runner's information and SKU can be anything, but many just use their display name in one word.
Fill in all of the information that you can, including the ones on the left panel.

8. Build ipa and upload.

Open terminal and use the following command at the project directory.

flutter build ipa

In the process, you'll be asked to type your password a lot. This password is simply your device's password. Since it will constantly pop up, a neat trick is to click 'Always Allow' :)
Now in Xcode, open a new file named Runner.xcarchive in the project/build/ios/archive directory.

(Look at all my failed attempts..)
Before you distribute it, validate the app first to make sure it runs safely and correctly. If it runs smoothly, then distribute it. Since we set automatic signing, there's not much for us to do then to wait until it is pushed to Apple server. Once it is finished, go back to App Store Connect and you should be able to select the build. Remember to submit it so that Apple can approve your app. Within 24-48 hours, your app will be approved and searchable in App Store!

9. iOS Screenshot dimensions.

When deploying, App Store Connect will require you to put in some screenshots of your app with several dimensions: 5.5, 6.5, 12.9. Capturing screenshots of the following devices will suffice. From my experience, the required screenshots for iPad Pro 2nd generation can be used for iPad Pro 3rd generation, and vice versa.

5.5 - iPhone 6S Plus, iPhone 7 Plus, iPhone 8 Plus
6.5 - iPhone XS Pro Max, iPhone 11 Max
12.9 - iPad 12.9 inch 5th generation

10. Updating your app.

Remember that this still is a flutter app and all of the edits will be done in flutter itself. Therefore, we have to go to pubspec.yaml and update the version of your app. Flutter documentation for version control is somewhat confusing. Basically, 1.0.0 is the version number and the number after + is the build number. Whenever there is a minor update, you should update the version as the following: 1.0.1+2. The next iteration will be 1.0.2+3, and so forth. Then, you'll build again, validate the app, distribute it, and update your build at App Store Connect.

That sums up on how to publish an app on App Store for flutter apps. If you're also interested in how to publish an app on Play Store, follow this link

If there are things I could improve on, please don't hesitate to let me know! I'm all ears :)

-JH
LinkedIn | Github

Dev.to and Grammarly?

Jacob Hunsaker — Sat, 22 May 2021 02:44:13 +0000

As I was trying to create/edit a post the other day, I noticed something really odd. It might just be an issue with my pc or Chrome, but I was able to click on any buttons, but was not able to click on the text field, which is a BIG problem if I'm trying to write a post. As a developer, I did my usual and went into Chrome console by inspecting if there are any console errors and found this.

An easy solution I found was to go to the Chrome Extensions and turn off Grammarly while I'm in Dev.to.

I hope this helps someone with the same problem!

If there are things I could improve on, please don't hesitate to let me know! I'm all ears :)

-JH
LinkedIn | Github

Vue CLI

Jacob Hunsaker — Thu, 20 May 2021 06:49:19 +0000

Today, I want to talk a little bit about the basics.

When starting a project in Vue, the easiest and fastest way is to utilize something called Vue CLI, standing for Command-line Interface. Simply put, it scaffolds a basic website in Vue for developers to start on. For those who are more familiar with React, this would be in the same category as "create-react-app", but better. Let's get into finding out what it is in more detail, how to install/use it, and some plugins that can be used to make it even better.

What is Vue CLI?

Vue CLI is the node installable Command-line Interface, providing a full system for rapid Vue.js development. With Vue CLI, developers can have a pre-built project they can easily adjust to their needs. It is nicely built, so that you do not have to spend unnecessary time on configurations, dependencies, webpack, etc. It also provides instant prototyping, allowing us to easily debug and visualize what's going on. What I like the most about Vue CLI is its collection of plugins. With just a simple line of code, you can add plugins to your project and utilize them accordingly.

Installing Vue CLI

Before we install Vue CLI, let's make sure we have Vue installed. Assuming everyone has Node.js installed, we will be using npm to install

npm install vue

To test whether we were successful in downloading it, we can check its version.

vue --version

Now that we have Vue installed, let's install Vue CLI.

npm install -g @vue/cli

Build an APP

It's no good if we don't use what we have just installed. Let's go on and create an app using Vue CLI, and implement some plugins that I recommend.
On the command line, once you navigate to the directory, this code will allow you to create a folder called app at your current repository, with everything you need for a Vue project set inside. Replace 'app' with the name of your project/folder. You will be prompted with many given presets. Unless required, you will most likely use the default configurations.

// you can replace 'app' with a name of your choice
vue create app
// or
vue create --default app

In the command line, cd into the directory you've just created, and check our instant-prototyping.

cd app
npm run serve

If you open your browser to localhost:8080, Voila! You will see the app running, and any changes you make will be applied to your site instantly.

Now that you have the basic CLI set up, you can add plugins to enhance your programming experience with Vue. These plugins have helped me become a better developer, guiding me through each step on how to use it. The plugins I recommend you to install, or at least tryout, are

vuex : A State Management Pattern + library for Vue.js apps, meaning it helps us control the states of our nested components.
vuetify : A plugin that utilizes the Material Design Framework. It helps developers with UI components, with absolutely incredible documentation.
quasar : A plugin that enhances the Vue.js user interface in a very user-friendly way. For starters, you can set up all of the interfaces in advance and get the code for you to adjust.

vue add vuex
vue add vuetify
vue add quasar

Today, I've shared some information about the Vue CLI and some useful plugins/user interfaces. Once you get to know how to use it, starting a project becomes a smoother process. Of course, having a more configured and defined project for implementing other plugins, or components, is another strength that follows.

If there are things I could improve on, please don't hesitate to let me know! I'm all ears :)

-JH
LinkedIn | Github

Using json-server for quick databases

Jacob Hunsaker — Tue, 30 Mar 2021 23:43:50 +0000

This time, I would like to introduce a very handy npm package for creating & using a simple JSON database called json-server. For the official documentation from the developer, you can check this site out.

To start off, let's install the package, first! Just like any other npm packages, you can simply install it using npm.

npm install -g json-server

Once you have the package installed, the next step is creating a json file with the name db.json with some data in it.

{
   "address": [
      "name": "Jacob Hunsaker",
      "address": "Somewhere in United States",
      "phone_num": "123-456-7890",
      "email": "jacobjhunsaker@gmail.com",
      "id": 1
   ],
}

Once you have everything set up, you can now actually use json-server. You can start json-server by going to the directory that has db.json and typing the following in the console.

json-server --watch db.json

Now if you go to http://localhost:3000/address/1, you'll get the following in JSON.

"name": "Jacob Hunsaker",
"address": "Somewhere in United States",
"phone_num": "123-456-7890",
"email": "jacobjhunsaker@gmail.com",
"id": 1

Now in your front-end (Vue.js & axios in my case), you'll just need to GET/POST/PUT/PATCH/DELETE the data into http://localhost:3000/address. Since we're using json, we'll also have to add the headers to your PUT/PATCH request.

const response = await fetch(
               `http://localhost:3000/address/${id}`,
               {
                  method: "PATCH",
                  body: JSON.stringify(updatedContact),
                  headers: {
                     "Content-type": "application/json; charset=UTF-8",
                  },
               }
            );

For a sample page, please check this simple Github repository using Vue.js.

If there are things I could improve on, please don't hesitate to let me know! I'm all ears :)

-JH
LinkedIn | Github

Javascript: Adjusting time-zone differences

Jacob Hunsaker — Wed, 24 Mar 2021 02:06:15 +0000

Using DateTime in JS is sometimes very annoying. When we're trying to manipulate Date objects, many times, we end up with time-zone differences, maximum days differences in months, wrong format, etc. This post will be mainly talking about a handy function I keep for adjusting timezone differences.

Unless we're using other JS packages such as moment.js, we are stuck with the basic JS Datetime object. Here is the documentation. The documentation is very well-written with great examples to understand. What I would like to use from the documentation today is Date.prototype.getTimezoneOffset(). This built-in Datetime function returns the time-zone offset in minutes for the current location to UTC. For example, if you're in MST, the time-zone offset would be -7, since it is 7 hours behind UCT.

So, now let's get into the function.

adjustForTimezone(date) {
      let timeOffsetInMS = date.getTimezoneOffset() * 60000;
      date.setTime(date.getTime() - timeOffsetInMS);
      return date
}

This function takes in a date parameter and changes the offset to Milliseconds. Date.setTime() gathers a millisecond value and outputs a Datetime value into the given parameter in the format (Day Mon dd yyyy hh:mm:ss Timezone).

Once we get the correct date, now we're up to changing the format to match the requirements package we're using needs or to simply make it more visually appealing.

For a sample page using this function, please check this simple Github repository using Vue.js.

If there are things I could improve on, please don't hesitate to let me know! I'm all ears :)

-JH
LinkedIn | Github

What I learned from Stack Overflow Developer Survey 2020

Jacob Hunsaker — Fri, 19 Mar 2021 20:28:48 +0000

As someone about to graduate from university and start my career, I have much interest in what's trending at the moment. Luckily, Stack Overflow has done me a favor in not only explaining what's up but with visualization. Stack Overflow takes surveys every year from their users to see who their viewers are, where they reside, and what they do. Being one of the most visited sites for software developers, the census from this site can be of great use for people like me. With this in mind, I want to share what I, a beginner of the web-dev community, learned from the survey.

1. Many have started their coding-life when they were 14-15 years old.
As for someone from South Korea, this was very shocking and discouraging on some points, since most mandatory-level school students in Korea don't get to even see a single line of "code" unless they attend an IT school. I got to think whether my life would have been easier/changed if I learned to code earlier in my life? ~~Probably not~~, but might have had an advantage when I really started to learn the language. This information made me realize that I am at a somewhat disadvantage, and to make up for it, I should do more.

2. Approximately 50% of people using JavaScript/HTML/CSS love their languages.
This is encouraging! I already know the gist of JavaScript, HTML, and CSS, and getting to know the fact that at least 50% of the people are satisfied with it helps with the effort I put in and will be putting in, in the future. What is Rust, by the way?

3. Of many collaboration tools, I HAVE TO know GitHub.
GitHub, Slack, and Jira are the top three collaboration tools, but for developers, GitHub seems to be essential. Slack and Jira, from my experience, are basically a way to communicate with the team, while GitHub is more of a way to collaborate your projects with. Using Visual Studio, GitHub was really easy: just a few clicks then you're good! However, I do not know, confidently, how to manually change branches, init, commit, push, and pull. This is also something I should work on.

4. Trying to solve problems in one go might not be the best way to approach problems.
Of course, it is good to be able to solve a problem right away. What I mean by this is trying to solve the problem in one go when I've been stuck with it for a little while. I have a tendency to focus on one thing when until I'm satisfied with what I got. Sometimes solving one error leads to ten more, and trying to solve it until it is complete might not be in the next 30 minutes.

5. Full-Stack Developer makes good money.
Considering that majority of the survey was done to developers in the field for 5-10 years, a yearly salary of $112k is very good, in my opinion. What that pointed out the most, tho, was the salary difference in front-end ($110k), full-stack ($112k), and back-end ($120k). From my experiences in web development, I'm more inclined to work in the front-end. Would the salary and preference difference be worth it? We'll see.

I think a Full-Stack Developer is currently in a great spot. Depending on education in the next few months/years, I would be able to decide whether to pursue a career in Full-Stack, Front-end, or even Back-end. I should continue doing what I like. It's time for me to go create some more sites.