Forem: Suchitkumar Khunt

Marvel Universe App - Built in Flutter + Appwrite

Suchitkumar Khunt — Mon, 09 May 2022 17:48:52 +0000

Overview of My Submission

Marvel Universe - is a mobile application, built with Flutter and AppWrite to exhibit the marvel cinematic universe, comics, characters and stories.

I have used the Appwrite Account API and Appwrite Database. I would like to continue work on this app and complete this with using all features of Appwrite. (Appwrite Storage & OAuth2 Providers).

Fork Project From: https://github.com/khuntsr/marvel-comics-flutter

Submission Category:

Mobile Moguls

Link to Code

khuntsr / marvel-comics-flutter

marvel-comics-flutter

Marvel Universe

Marvel Universe - is a mobile application, built with Flutter and AppWrite to exhibit the marvel cinematic universe, comics, characters and stories.

View on GitHub

Additional Resources / Info

In this app development environment is used, I have not created any production environment. I have attached the scrrenshot of used database colletions, if you want to run the source code.

This version of app contains below features,

New User Registration (Appwrite Account API)
User Login (Appwrite Account API)
Marvel Universe Screen (Appwrite Database)
Change Password (Appwrite Account API)
Marvel Universe Moview Details
Drawer Menu
Logout

I will continue work on this app and will deliver below features,

Marvel Comics Screen (Appwrite Database & Marvel API)
Marvel Stories Screen (Appwrite Database & Marvel API)
Marvel Characters Screen (Appwrite Database & Marvel API)
Profile Details (Appwrite Account API) & Pic Update (AppWrite Storage)
External Loging (OAuth2 Providers will be used)

Glims of the App.

Dashboard screen

Dashboard screen with playing video in YouTube player

User login screen

Awesome animated drawer menu

Dashboard screen II

User registration screen

Change password screen

Marvel cinemetic details screen

Database collection arrtibute screen (it is used in dashboard screen)

It is my first Hackathon, and I had a lots of fun with it.

Appricite your time to reading this article.

Thank You! Happy Coding :)

Good vs Bad - Highlight the active page in the nab-bar for MVC Razor View Engine

Suchitkumar Khunt — Tue, 26 Apr 2022 12:15:43 +0000

Below is the expected output for this Article

Bad practice:

Writing a piece of JavaScript code to each page to add/remove active class to corresponding link in nav-bar
Writing a piece of JavaScript code in master layout page rather than each page for highlight active page in nav-bar

Writing a piece of JavaScript code to each page to add/remove active class to corresponding link in nav-bar

Bad Practice: Writing a piece of JavaScript code to each page to add/remove an active class to the corresponding link in nav-bar

Assume we have three pages; Home, About and Contact and wrote the below bad code to manage highlight active class in nav-bar.

Home Page:

  $('#lnkHome').addClass('active');

  $('#lnkAbout').removeClass('active');

  $('#lnkContact').removeClass('active');

About Page:

  $('#lnkHome').removeClass('active');

  $('#lnkAbout').addClass('active');

  $('#lnkContact').removeClass('active');

Contact Page:

  $('#lnkHome').removeClass('active');

  $('#lnkAbout').removeClass('active');

  $('#lnkContact').addClass('active');

Bad Practice: Writing a piece of JavaScript code on the master layout page rather than each page to highlight the active page in the nav-bar

Assume we have three pages; Home, About and Contact and wrote the below bad code in the master layout page to manage highlight active class in nav-bar.

var currentActionName = ViewContext.RouteData.Values["action"].ToString();

$(document).ready(function () {
    //remove the active class in each pages
    $('.lnk').each(function () {
        $(this).removeClass('active');
    });


    //assign the active class to active page only
    if ('@currentActionName' === 'Index') {
        $('#lnkHome').addClass('active');
    } else if ('@currentActionName' === "About") {
        $('#lnkHome').addClass('lnkAbout');
    } else if ('@currentActionName' === "Contact") {
        $('#lnkHome').addClass('lnkContact');
    }
});

Good Practice:

Rather than writing the JavaScript code, we will create an Html helper in C# and manage the active class from that code.

Refer below code, I have created an Html helper with the method IsSelected() to manage the active class in the nav-bar.

`
public static class HtmlHelperExtensions

{

    public static string IsSelected(this HtmlHelper html, string controller = null, string action = null,

        string cssClass = null)

    {

        if (string.IsNullOrEmpty(cssClass))

            cssClass = "active";



        var currentAction = (string)html.ViewContext.RouteData.Values["action"];

        var currentController = (string)html.ViewContext.RouteData.Values["controller"];



        if (string.IsNullOrEmpty(controller))

            controller = currentController;



        if (string.IsNullOrEmpty(action))

            action = currentAction;



        return controller == currentController && action == currentAction ? cssClass : string.Empty;

    }



    public static string PageClass(this HtmlHelper html)

    {

        var currentAction = (string)html.ViewContext.RouteData.Values["action"];

        return currentAction;

    }

}
`

After writing the above C# code, we will create this method in each menu link as bellowed. [@Html.IsSelected()]

@Html.ActionLink("Home", "Index", "Home") @Html.ActionLink("About", "About", "Home") @Html.ActionLink("Contact", "Contact", "Home")

Below are the advantages of the above code.

Ease to use
Easily manage the highlight page functionality in large scale applications
Show the single menu item highlighted for multiple pages
Manage dynamic highlight class name for each menu item
And most important, it is custom written code so we can customise it as per our need

Thank you for reading.

Happy coding :)

Good VS Bad – Beyond the JavaScript Console

Suchitkumar Khunt — Wed, 21 Apr 2021 14:02:05 +0000

In your development career, you mostly know about the console.log() but the console API can do many things that you may don’t know. HERE, in this article, we are going to learn all about console API with Good VS Bad practice.

Let’s start with consoling the console object.

Write console.log(console) in your browser’s console editor and you found the list of APIs provided by the console object. Each API purpose is unique and useful in certain cases.

Below are my explanations of the most useful APIs in console object.

Assume you have an Object on the list and you show that on the JavaScript console.

The Bad Practice

The Good Practice

Assertion – Sometimes we want to log only when the condition is false.

console.assert() – If condition false then only give an error. It eliminating the need for if condition and keep your code clean.

The Bad Practice

The Good Practice

{ } – Always use Braces to log the object with the name.

The Bad Practice

The Good Practice

Group: If you have multiple logs, then try log group for collapsible sections.

The Bad Practice

The Good Practice

Always, console object with its’ properties.

The Bad Practice

The Good Practice

How to set a timer with the console?

We can start a timer with the console by calling time, then call timeLog to measure the elapsed time. It provides a simple solution for measuring performance.

Now, lets talk about remaining APIs in console log.

console.clear()

The console.clear() method clears the console

console.count()

Writes to the console the number of times that particular console.count() is called.

console.info()

This method writes a message to the console.

console.warn()

The console.warn() method writes a warning to the console.

console.error()

The console.error() method writes an error message to the console.

Console.trace()

The console.trace() method displays a trace that shows how the code ended up at a certain point.

How to apply CSS in console.log()?

We can also apply the style in the console.log(). Use the special %c character to add some style.

Thank you for reading this article.

28 Days Of Flutter Bootcamp 🕑 - Day 2 - Creating A New Flutter Project And Setup Physical Device And Emulator

Suchitkumar Khunt — Wed, 21 Apr 2021 02:27:19 +0000

Welcome to Flutter Bootcamp’s second session. On this day, you will learn how to set up a physical device and emulator, and how to create a new empty flutter project and folder structure of Flutter.

Let’s start with creating a new Flutter project.

Step 1

Fire up Android Studio and select the option “Start a new Flutter project”

Step 2

As we are going to create an end-user application, select the “Flutter Application” and “Next” button.

Flutter Application: When you want to develop an end-user Android or iOS mobile application.
Flutter Plugins: When exposing an Android or iOS API for developers, in sort if you want to make native functionality for Flutter.
Flutter Package: When you want to create a widget using pure dart programming.
Flutter Module: When creating a Flutter component to add to your application.

Step 3

Configure the new Flutter Application

Project Name: Name of your project
Flutter SDK path: This is the folder path where we put the flutter SDK earlier
Project Location: This part tells you where your project gone be saved
Description: About text for your application

Step 4

Set the package information

Package name: It helps to create a package name by combining the company domain and name of your project for unique identification. Play store can identify a unique app with this package name.

You can find some piece of starting code. This code is created by the Flutter team and all it does a simple counting application. Before starting development first, we need to connect the physical or virtual device for testing and debugging purpose. Android studio provides us with a feature for running an app on a physical device or virtual device (emulator).

How to create an emulator in Android studio?

Before starting make sure that we have pre-installed all drivers.

Step 1

Open SDK Manager (Tools > SDK Manager) and check that you have installed the below required things.

SDK Platforms > One of the SDK Platforms.
SDK Tools > Android SDK Build-Tools
SDK Tools > Google USB Driver
SDK Tools > Android SDK Tools
SDK Tools > Android Emulator

Step 2

Open AVD Manager (Tools > AVD Manager)
Click on “+ Create Virtual Device…”

Select your preferred device and then click on “Next”

Select your preferred system image and click on “Next” and then click on “Finish”. I suggest to chose x86 Images for fast performance on testing and debugging.

Now, click on the lunch icon to start your created emulator.

How to connect a physical device with your Android studio?

Step 1

You need to enable USB debugging on your device

Go to the “Settings > About Phone” on your android device.
Tap 10 times on “Build Number”, and then you will find the message “You are now a developer!”

Step 2

Now, you have successfully enabled developer mode. Go to the developer option “Settings > System > Developer Options”

Step 3

Enable “USB debugging” under the DEBUGGING in the developer options screen.

Step 4

Now plug your Android device with the system. If the device successfully connected, you can find the notification “USB debugging connected” on your device. After that click on the “run” icon but make sure that your device is selected on Flutter device selection. You can also run the command “flutter run” on Terminal.

Now, Let’s talk about folder structure.

.dart tool

Starting with the very top folder and it is .dart_tool. This directory is new in Dart 2 and it is used by a pub and other tools. In earlier dart, there is a directory name as .pub but after Dart 2 it is replaced with .dart_tool.

.idea

This directory stays for Android studio configuration. These configurations include VCS mapping, run configuration, debug configuration, navigation history, save details about current open files and many more.

android

This folder contains the fully native Android project code and Flutter used this folder for building the android application. When we run the application on the device/emulator, this folder is used to build an android application and then it is deployed on the device/emulator.

build

A build directory stays for the compiled code of your application. When you run/debug the application, Flutter SDK automatic generate the build file and save that file in this directory.

iOS

This folder contains the complete code of XCode for the native iOS app and Flutter used this folder for building the iOS application. When we are run the application on the device/simulator, this folder is used to build an iOS application and then it is deployed on the device/simulator.

lib

Yes! It is an important directory for us. This folder contains the dart files that contain the flutter code. By the way, we are spent almost 90% time with this directory.

test

This folder stands for automatic testing. A developer can write all code for automatic testing in this folder.

.gitignore file

This file is used when you are working with Git. This is a text file and it contains a list of folders, files and extensions which should be ignored in push the code on Gist.

Note Git is a free and open-source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.

.metadata file

The second name in our list is .metadata. It is used for automatically tracking the properties by Flutter SDK. This is an auto managed file and we are not going to change anything in this file.

.packages file

This text file contains the list of dependencies by Flutter SDK. This is an auto managed file and we are not going to change anything in this file.

pubspec.lock

This file contains the list of package and SDK information. This is an auto managed file and we are not going to change anything in this file.

pubspec.yaml

Yes! It is an important file for us. This file stands for the root level settings for our Flutter application. We can say that it's a projects configuration file. This file contains configurations like project version, project name, project description, project dependencies, assets management (images, fonts) and project environment.

Working with the material app, assets and add App Icons to the android and iOS project.

Don't miss my next article. Follow me on my DEV.TO profile. Click HERE to visit my profile.

Thank You for browsing. :)

28 Days of Flutter Bootcamp 🕐– Day 1: Introduction and development setup

Suchitkumar Khunt — Mon, 20 Jul 2020 11:53:03 +0000

Welcome to the Flutter Bootcamp. This is the fully flutter course for a complete guide to the Flutter SDK and flutter framework with DARK for building a beautiful native Android and iOS application. I am covering all fundamental concepts for flutter development; this becomes the most comprehensive free flutter course.

What you will learn?

The fundamentals of building apps with Flutter and Dart
Build beautiful, engaging native and fast apps for Android and iOS with one codebase
Learn the advanced UI with premade flutter widgets and third-party SDK
Dart programming with the concept of OOPS fundamentals
All widgets explanation with rich text articles and speed code video
Create a fully functional app with firebase authentication, firestore and fire storage [with speed code video]
Advanced features like push notification, google map, device camera, touch authentication and many more
Deep dive in Crashlytics, Admob, Performance, A/B testing and Remote config

What you will need?

A computer system with admin privileges
We will use Android studio as a development tool [it is free to use]
Git, Flutter SDK and Dart SDK
Have at least 20GB of free space on your hard drive
This course starts with a very basic level, so no prior programming language experience required

What is Flutter?

Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktopfrom a single codebase. In this course, you will learn about mobile development.

Why I choose Flutter for mobile development?

Fast Development

Paint your app to life in milliseconds with Stateful Hot Reload. Use a rich set of fully customizable widgets to build native interfaces in minutes.
Flutter’s hot reload helps you quickly and easily experiment, build UIs, add features, and fix bugs faster. Experience sub-second reload times without losing state on emulators, simulators, and hardware.

Expressive and Flexible UI

Quickly ship features with a focus on native end-user experiences. The layered architecture allows for full customization, which results in incredibly fast rendering and expressive and flexible designs.
Delight your users with Flutter’s built-in beautiful Material Design and Cupertino (iOS-flavour) widgets, rich motion APIs, smooth natural scrolling, and platform awareness.

Native Performance

Flutter’s widgets incorporate all critical platform differences such as scrolling, navigation, icons and fonts, and your Flutter code is compiled to native ARM machine code using Dart’s native compilers.

Step by Step walk-throughs

Flutter Development setup for Windows

A. Install Git:

Download Git from https://git-scm.com/downloads

Install the downloaded Git setup

B. Ready to start with Flutter SDK:

Download the latest stable release Flutter SDK from https://flutter.dev/docs/get-started/install/windows
Extract the zip file and place the contained flutter in the desired installation location for the Flutter SDK (for example, C:\src\flutter; do not install Flutter in a directory like C:\Program Files\ that requires elevated privileges)

Update your path (If you wish to run Flutter commands in the regular Windows console, take these steps to add Flutter to the PATH environment variable)

1) From the Start search bar, enter ‘env’ and select Edit the system environment variables for your account.

2) In the Advanced tab click on “Environment Variables…”

3) Under User variables check if there is an entry called Path: (select the Path entry and click on Edit)

4) If “C:\src\flutter\bin” does not exist, then click on Newand add “C:\src\flutter\bin”

5) To check the path variable setup open the command prompt and run “flutter — version”

C. Get started with Dark SDK:

Download the latest stable release version of Dark from https://dart.dev/tools/sdk/archive

Extract the zip file and place the contained dart-sdk in the desired installation location for the Flutter SDK (for example, C:\Program Files\Dart\dart-SDK)
Update your path

1) From the Start search bar, enter ‘env’ and select Edit environment variables for your account.

2) In the Advanced tab click on “Environment Variables…”

3) Under System variables check if there is not an entry called DARK_SDK; click on New…

4) Enter “DART_SDK” in Variable name and “C:\Program Files\Dart\dart-sdk” in Variable value then click on OK

5) To check the path variable setup open the command prompt and run “flutter — version”

D. Install the Android Studio tools:

Download the latest version of Android Studio from https://developer.android.com/studio and install it. We will set up the Android Emulator later. [At the development time]

E. Finish the installation by running the command flutter doctor:

From a console window run the command “flutter doctor” to see if there are any platform dependencies you need to complete the setup:

Note: You may warning message “! Doctor found issues in 1 category” for “connected device”. Ignore it at this point as we have not set up any physical device or emulator.

Note: To set up the Flutter development on MAC, follow the step describe in https://flutter.dev/docs/get-started/install/macos. As I don’t have MAC so unable to describe the steps in details but you can follow the step as per the above link to complete the setup on MAC.

NEXT: Creating a new flutter project and setup physical device and emulator.

Answer: ELMAH - Email not received in production environment

Suchitkumar Khunt — Fri, 03 Jan 2020 11:07:33 +0000

Sep 17 '19

After going through your question, I've found that you just forgot to add an email setting. Add the below lines in your web.config. Make sure to change the hostname, port, username, and password.

<system.net>
    <mailSettings>
      <smtp deliveryMethod="Network">
        <network host="host address" port="12345" userName="username here" password="password here"/>
      </smtp>
    </mailSettings>
</system.net>

Open Full Answer