Duende

About me

fiazhari@gmail.com.com

My name is Luthfi Azhari, at high scholl called me Fiaz take from middle name LuthFI AZhari. I’m a developer, designer, content creator. I currently work as a Project Manager/Head IT Department for MediaWave. I also make video tutorial about programming for devindo

I started this website as a place to document everything I learned while transitioning from designer to developer. I’ve continued throughout my career and the free resources I create help thousands of people successfully become developers. Please consider supporting me with a coffee. (I might use it towards beer.)

View resume

Some things I like

Making websites, make mobile app with flutter, create tutorial in youtube, watch movie, read fiction book, video games, ride motorcycle, gardening, coffe with milk, fried rice, dreaming.

Music

Sometimes I need a music and i will play...

Timeline

1993 – Born in Magetan, small town in East Java, Indonesia. I’m the youngest of three.
2006 – My father buys our first computer, and i play game cat vs dog in windows xp
2008 – I found book about hacking and i destroy some website organization
2009 – First time found facebook and love it
2010 – I create group named with hacking friday in high school and now hacking friday become an official organization at school
2011 – I write personal blog fiazku
2012 – I go to colege at telkom university
2013 – First paid for making a stop motion video at Brodo
2014 – Runner up #6secfilm at tribeca
Also 2014 – I get fist time job at sisfo telkom university
2015 – I graduated from college
Also 2015 – I move work to ideaplus teknology kreatif x-igent
Also 2015 – I continued studying at Binus University
2016 – I am married with meliza
Also 2016 – Move Work to MediaWave
2017 – At april promoted as co-head information technology at MediaWave
Also 2017 – At June promoted as Head Information Technology / Project Manager at MediaWave
2018 – I graduated from Binus University
Also 2018 – At december I left my job at mediawave and start as freelance
2019 – I continued my master degree at telkom university
Also 2019 – Software Instrumentalist at devopjbs singapore casualess
Also 2019 – CTO at sociotrax Sociotrax

Currently Using

Computer: MacBook Pro 2016
Hosting: Netlify, Domanesia
Editor: Visual Studio Code

Terms and Conditions

fiazhari@gmail.com.com

Terms and Conditions

Welcome to lthfi!

These terms and conditions outline the rules and regulations for the use of lthfi's Website, located at lthfi.netlify.app.

By accessing this website we assume you accept these terms and conditions. Do not continue to use lthfi if you do not agree to take all of the terms and conditions stated on this page. Our Terms and Conditions were created with the help of the Terms And Conditions Generator and the Free Terms & Conditions Generator.

The following terminology applies to these Terms and Conditions, Privacy Statement and Disclaimer Notice and all Agreements: "Client", "You" and "Your" refers to you, the person log on this website and compliant to the Company’s terms and conditions. "The Company", "Ourselves", "We", "Our" and "Us", refers to our Company. "Party", "Parties", or "Us", refers to both the Client and ourselves. All terms refer to the offer, acceptance and consideration of payment necessary to undertake the process of our assistance to the Client in the most appropriate manner for the express purpose of meeting the Client’s needs in respect of provision of the Company’s stated services, in accordance with and subject to, prevailing law of Netherlands. Any use of the above terminology or other words in the singular, plural, capitalization and/or he/she or they, are taken as interchangeable and therefore as referring to same.

We employ the use of cookies. By accessing lthfi, you agreed to use cookies in agreement with the lthfi's Privacy Policy.

Most interactive websites use cookies to let us retrieve the user’s details for each visit. Cookies are used by our website to enable the functionality of certain areas to make it easier for people visiting our website. Some of our affiliate/advertising partners may also use cookies.

License

Unless otherwise stated, lthfi and/or its licensors own the intellectual property rights for all material on lthfi. All intellectual property rights are reserved. You may access this from lthfi for your own personal use subjected to restrictions set in these terms and conditions.

You must not:

Republish material from lthfi Sell, rent or sub-license material from lthfi Reproduce, duplicate or copy material from lthfi Redistribute content from lthfi This Agreement shall begin on the date hereof.

Parts of this website offer an opportunity for users to post and exchange opinions and information in certain areas of the website. lthfi does not filter, edit, publish or review Comments prior to their presence on the website. Comments do not reflect the views and opinions of lthfi,its agents and/or affiliates. Comments reflect the views and opinions of the person who post their views and opinions. To the extent permitted by applicable laws, lthfi shall not be liable for the Comments or for any liability, damages or expenses caused and/or suffered as a result of any use of and/or posting of and/or appearance of the Comments on this website.

lthfi reserves the right to monitor all Comments and to remove any Comments which can be considered inappropriate, offensive or causes breach of these Terms and Conditions.

You warrant and represent that:

You are entitled to post the Comments on our website and have all necessary licenses and consents to do so; The Comments do not invade any intellectual property right, including without limitation copyright, patent or trademark of any third party; The Comments do not contain any defamatory, libelous, offensive, indecent or otherwise unlawful material which is an invasion of privacy The Comments will not be used to solicit or promote business or custom or present commercial activities or unlawful activity. You hereby grant lthfi a non-exclusive license to use, reproduce, edit and authorize others to use, reproduce and edit any of your Comments in any and all forms, formats or media.

Hyperlinking to our Content

The following organizations may link to our Website without prior written approval:

Government agencies; Search engines; News organizations; Online directory distributors may link to our Website in the same manner as they hyperlink to the Websites of other listed businesses; and System wide Accredited Businesses except soliciting non-profit organizations, charity shopping malls, and charity fundraising groups which may not hyperlink to our Web site. These organizations may link to our home page, to publications or to other Website information so long as the link: (a) is not in any way deceptive; (b) does not falsely imply sponsorship, endorsement or approval of the linking party and its products and/or services; and (c) fits within the context of the linking party’s site.

We may consider and approve other link requests from the following types of organizations:

commonly-known consumer and/or business information sources; dot.com community sites; associations or other groups representing charities; online directory distributors; internet portals; accounting, law and consulting firms; and educational institutions and trade associations. We will approve link requests from these organizations if we decide that: (a) the link would not make us look unfavorably to ourselves or to our accredited businesses; (b) the organization does not have any negative records with us; (c) the benefit to us from the visibility of the hyperlink compensates the absence of lthfi; and (d) the link is in the context of general resource information.

These organizations may link to our home page so long as the link: (a) is not in any way deceptive; (b) does not falsely imply sponsorship, endorsement or approval of the linking party and its products or services; and (c) fits within the context of the linking party’s site.

If you are one of the organizations listed in paragraph 2 above and are interested in linking to our website, you must inform us by sending an e-mail to lthfi. Please include your name, your organization name, contact information as well as the URL of your site, a list of any URLs from which you intend to link to our Website, and a list of the URLs on our site to which you would like to link. Wait 2-3 weeks for a response.

Approved organizations may hyperlink to our Website as follows:

By use of our corporate name; or By use of the uniform resource locator being linked to; or By use of any other description of our Website being linked to that makes sense within the context and format of content on the linking party’s site. No use of lthfi's logo or other artwork will be allowed for linking absent a trademark license agreement.

iFrames

Without prior approval and written permission, you may not create frames around our Webpages that alter in any way the visual presentation or appearance of our Website.

Content Liability

We shall not be hold responsible for any content that appears on your Website. You agree to protect and defend us against all claims that is rising on your Website. No link(s) should appear on any Website that may be interpreted as libelous, obscene or criminal, or which infringes, otherwise violates, or advocates the infringement or other violation of, any third party rights.

Your Privacy

Please read Privacy Policy

Reservation of Rights

We reserve the right to request that you remove all links or any particular link to our Website. You approve to immediately remove all links to our Website upon request. We also reserve the right to amen these terms and conditions and it’s linking policy at any time. By continuously linking to our Website, you agree to be bound to and follow these linking terms and conditions.

Removal of links from our website

If you find any link on our Website that is offensive for any reason, you are free to contact and inform us any moment. We will consider requests to remove links but we are not obligated to or so or to respond to you directly.

We do not ensure that the information on this website is correct, we do not warrant its completeness or accuracy; nor do we promise to ensure that the website remains available or that the material on the website is kept up to date.

Disclaimer

To the maximum extent permitted by applicable law, we exclude all representations, warranties and conditions relating to our website and the use of this website. Nothing in this disclaimer will:

limit or exclude our or your liability for death or personal injury; limit or exclude our or your liability for fraud or fraudulent misrepresentation; limit any of our or your liabilities in any way that is not permitted under applicable law; or exclude any of our or your liabilities that may not be excluded under applicable law. The limitations and prohibitions of liability set in this Section and elsewhere in this disclaimer: (a) are subject to the preceding paragraph; and (b) govern all liabilities arising under the disclaimer, including liabilities arising in contract, in tort and for breach of statutory duty.

As long as the website and the information and services on the website are provided free of charge, we will not be liable for any loss or damage of any nature.

Luthfi Azhari

fiazhari@gmail.com.com

Developer

Highly motivated and versatile developer who is passionate about writing clean, efficient code and maintaining modern standards and security.

Technical Skills

Languages - JavaScript, PHP, HTML5, CSS3, Dart, Go
Tools/Environment - Node.js, Git, Webpack, Composer, CLI, Sass
Frameworks/Libraries - Flutter, React, Vue, Laravel, Wordpress, jQuery, Bootstrap, Bulma
Data - MySQL, MongoDB, GraphQL, JSON

Experience

Freelance Developer

Freelance - 2019 - Present | Bandung, ID

Develop Website or Mobile App
Design Mockup Website or Mobile App
Content creator at devindo

Project Manager Acquisition

Finata Group - 2018 | Remote

Manage new team for SASS Development
Supervise the development process
Optimize flow work in team

UI Developer, Co-Head Information Technology, Project Manager

MediaWave Interaktif - 2016 - 2018 | Bandung, ID

Manage team and timeline of work
Comunication with client (Sinarmas, Duta Abadi Primantara, Partai UMNO Malaysia, CT Corp)
Develop idea for future technology
Manage all design process on team
Designed dashboard for social media monitoring
Designed sentiment analysis
Designing development proposal
Design integration of rest api at tourismwave.com
Develop website tourismwave.com
Design UI website tourismwave.com

UI Designer

Ideaplus Tekonologi Kreatif (X-IGENT) - 2016 | Bandung, ID

Design ui/ux for mobile app and website
Editing promotional video
Reseach design for new feature
Design promotional banner

Grapich Designer

Sisfo, Telkom University. - 2014 - 2015 | Bandung, ID

Designed and maintained custom websites
Designed promotions banner print or digital
Create mockup/asset of website and mobile app
Training about design website and mobile to students

Internship

Changefly - Oct 2018 - Present | Remote : Learn about the Google Flutter SDK and other technologies

Projects

Brodo - Create Video Stopmotion for Promotional
Pertamina - Design Procedure and book guideline
InfoDKV - Design logo, banner and some asset for branding
Library UNY - Design Bookmark book for promotional
Ojesy - Design branding brand
Tourismwave - Develop Web App for booking package tour, flight and hotel. build with laravel
Sinarmas - Create Dashboard Social Media Monitoring. build with laravel, spring, solr
KICKS by MSD - Create Website blog for sharing information in community. build with wordpress
Digital Johor - Create social media monitoring and analytics. build with vue, spring, solr
Snapcart - Redesign Web Company Profile. build with wordpress
Transmedia Sosial - Built Dashboard for social media listening, monitoring, and tiketing. build with vue, spring, solr, laravel
Cripko - Mobile app for monitoring cripto currency. build with flutter
Mitra Go - Mobile app get and book your ticket like traveloka or tiket.com, build with flutter
Prabowo Presidenku - Mobile app for showing news about prabowo. build with flutter
Wellness Suplement - Design for web company profile. build with wordpress
Info Honda Malang - Azis - Web Market place for car. build with gatsby
Sahabat Tambang - Web information of mining group. build with wordpress
ABH Holiday - Web for rent car. build with gatsby
Honda Center Malang - Arif - Web Sales Honda. build with gatsby
Honda Mobil Malang - Vivil - Web Sales Honda. build with gatsby
Malang Honda Mobil - Lisa - Web Sales Honda. build with gatsby
Honda Malang Mobil - Mandalasena - Web Sales Honda. build with gatsby
Jobs3.net - Mobile App for Recruitment. build with flutter
Container Wise - Mobile App for scan bottle and get reward. build with flutter
Life Plus - Mobile App build to make aggrement with local repair. build with flutter
ORO Gold - Project oracle singapore build for Standart Bank Chartered, Mobile App for buy or gift gold. build with flutter

Education

Master of Computer Science

Telkom University - 2019 - Present | Bandung, ID

Bachelor of Information System

Binus University - 2015 - 2018 | Jakarta, ID

Associate of Informatics Management

Telkom University - 2012 - 2015 | Bandung, ID

Accomplishments

Runner up in 2014 #6Secfilms competition by tribeca. Source
in under 5KB with flutter. source

Privacy Policy

fiazhari@gmail.com.com

At lthfi, accessible from lthfi.netlify.app, one of our main priorities is the privacy of our visitors. This Privacy Policy document contains types of information that is collected and recorded by lthfi and how we use it.

If you have additional questions or require more information about our Privacy Policy, do not hesitate to contact us.

This Privacy Policy applies only to our online activities and is valid for visitors to our website with regards to the information that they shared and/or collect in lthfi. This policy is not applicable to any information collected offline or via channels other than this website.

Consent

By using our website, you hereby consent to our Privacy Policy and agree to its terms.

Information we collect

The personal information that you are asked to provide, and the reasons why you are asked to provide it, will be made clear to you at the point we ask you to provide your personal information.

If you contact us directly, we may receive additional information about you such as your name, email address, phone number, the contents of the message and/or attachments you may send us, and any other information you may choose to provide.

When you register for an Account, we may ask for your contact information, including items such as name, company name, address, email address, and telephone number.

How we use your information

We use the information we collect in various ways, including to:

Provide, operate, and maintain our webste Improve, personalize, and expand our webste Understand and analyze how you use our webste Develop new products, services, features, and functionality Communicate with you, either directly or through one of our partners, including for customer service, to provide you with updates and other information relating to the webste, and for marketing and promotional purposes Send you emails Find and prevent fraud Log Files

lthfi follows a standard procedure of using log files. These files log visitors when they visit websites. All hosting companies do this and a part of hosting services' analytics. The information collected by log files include internet protocol (IP) addresses, browser type, Internet Service Provider (ISP), date and time stamp, referring/exit pages, and possibly the number of clicks. These are not linked to any information that is personally identifiable. The purpose of the information is for analyzing trends, administering the site, tracking users' movement on the website, and gathering demographic information. Our Privacy Policy was created with the help of the Privacy Policy Generator and the Online Privacy Policy Generator.

Google DoubleClick DART Cookie

Google is one of a third-party vendor on our site. It also uses cookies, known as DART cookies, to serve ads to our site visitors based upon their visit to www.website.com and other sites on the internet. However, visitors may choose to decline the use of DART cookies by visiting the Google ad and content network Privacy Policy at the following URL – https://policies.google.com/technologies/ads

Our Advertising Partners

Some of advertisers on our site may use cookies and web beacons. Our advertising partners are listed below. Each of our advertising partners has their own Privacy Policy for their policies on user data. For easier access, we hyperlinked to their Privacy Policies below.

Google

https://policies.google.com/technologies/ads

Advertising Partners Privacy Policies

You may consult this list to find the Privacy Policy for each of the advertising partners of lthfi.

Third-party ad servers or ad networks uses technologies like cookies, JavaScript, or Web Beacons that are used in their respective advertisements and links that appear on lthfi, which are sent directly to users' browser. They automatically receive your IP address when this occurs. These technologies are used to measure the effectiveness of their advertising campaigns and/or to personalize the advertising content that you see on websites that you visit.

Note that lthfi has no access to or control over these cookies that are used by third-party advertisers.

Third Party Privacy Policies

lthfi's Privacy Policy does not apply to other advertisers or websites. Thus, we are advising you to consult the respective Privacy Policies of these third-party ad servers for more detailed information. It may include their practices and instructions about how to opt-out of certain options.

You can choose to disable cookies through your individual browser options. To know more detailed information about cookie management with specific web browsers, it can be found at the browsers' respective websites.

CCPA Privacy Rights (Do Not Sell My Personal Information)

Under the CCPA, among other rights, California consumers have the right to:

Request that a business that collects a consumer's personal data disclose the categories and specific pieces of personal data that a business has collected about consumers.

Request that a business delete any personal data about the consumer that a business has collected.

Request that a business that sells a consumer's personal data, not sell the consumer's personal data.

If you make a request, we have one month to respond to you. If you would like to exercise any of these rights, please contact us.

GDPR Data Protection Rights

We would like to make sure you are fully aware of all of your data protection rights. Every user is entitled to the following:

The right to access – You have the right to request copies of your personal data. We may charge you a small fee for this service.

The right to rectification – You have the right to request that we correct any information you believe is inaccurate. You also have the right to request that we complete the information you believe is incomplete.

The right to erasure – You have the right to request that we erase your personal data, under certain conditions.

The right to restrict processing – You have the right to request that we restrict the processing of your personal data, under certain conditions.

The right to object to processing – You have the right to object to our processing of your personal data, under certain conditions.

The right to data portability – You have the right to request that we transfer the data that we have collected to another organization, or directly to you, under certain conditions.

If you make a request, we have one month to respond to you. If you would like to exercise any of these rights, please contact us.

Children's Information

Another part of our priority is adding protection for children while using the internet. We encourage parents and guardians to observe, participate in, and/or monitor and guide their online activity.

lthfi does not knowingly collect any Personal Identifiable Information from children under the age of 13. If you think that your child provided this kind of information on our website, we strongly encourage you to contact us immediately and we will do our best efforts to promptly remove such information from our records.

Modal menjadi web developer

fiazhari@gmail.com.com — Fri, 05 Jun 2020 00:00:00 GMT

Dilihat dari statistik youtube devindo, ternyata pengunjung paling banyak adalah dengan kata kunci web developer. Yap kali ini saya akan membahas bagai mana memulai atau apa sih modal mejadi web developer.

Bagi kalian yang udah expert mungkin info ini tidak terlalu berguna, untuk yang baru mulai yuk silahkan simak.

Untuk menjadi web developer pertama adalah alat. Mungkin dari kalian belum ada akses untuk mempunyai laptop atau komputer. Kalian bisa memulai lewat lab sekolah atau kampus kalian, fasilitas ini biasanya gratis untuk digunakan, kalo memang terbatas silahkan komunikasikan saja ke pihak terkait mengenai tujuan kamu. Kalo memang tidak bisa kalian bisa memanfaatkan handphone kalian, yap beberapa saat yang lalu ada subscriber yang menanyakan saya mengenai koding lewat handphone, dan saya pun kaget ternyata memanfaatkan handphone untuk koding bisa juga.

Setelah mempunyai modal untuk alat, hal yang pertama kalian pelajari adalah html, iya ini dasar banget dan kalian bisa menuliskan kode html ini dengan text editor atau sekedar dengan node. Untuk referensi belajar dasar html di channel ini ada listnya silahkan berkunjung.

Selanjutnya setelah memahami html adalah belajar css, kalo kalian tidak mempelajari css tampilan website yang ingin kalian bangun pasti kurang menarik, iya karena tujuannya css adalah mempercantik tampilan, dalam hal ini kalian benar-benar harus belajar basic, jangan langsung jumpin ke framework kayak bootstrap atau pun yang lain. karena kalo kurang kuat kalian bakalan bingung kalo ada task kecil sesederhana untuk merubah warna.

nah 2 ini udah basic banget kalo kalian undah lancar bisa naik ke tahap selanjutnya, yaitu belajar javascript. sederhananya kalo kalian udah bisa html dan tampilannya udah di percantik pake css, kadang kalian mungkin pengen data yang ada di html kalian bisa di ubah ubah dengan mudah, salah satu caranya yaitu dengan javascript, javascript sangat luas saya rekomendasikan kalian belajar javascript dari dasar di freecodecamp.org

nah apakah 3 itu saja sudah cukup. Iya sudah cukup untuk dasarnya. sesudah memahami 3 itu kalian bisa belajar lebih lanjut mengenai framework css ataupun javascript. Jadi bisa dikatakan selamat! ada sudah jadi web developer pemula.

kalo di rasa konten seperti ini layak di pertahankan atau di buatkan silahkan komentar ya.

Jangan lupa subscribe

Terimakasih

Deno Service

fiazhari@gmail.com.com — Wed, 03 Jun 2020 00:00:00 GMT

Hello everyone, iam fiaz luthfi and now you are on devindo youtube channel. in this video i will continue tutorial about deno, if you forget previous video, the link is above here.

and again before we start, now deno has become 1.1.0, you can upgrade it by do deno upgrade in your terminal

In this video i will countinue to create service of handler.

first one, i want to make id as unix so to make it easy, i use library uuid create file createId.ts in service

import { v4 as uuid } from "https://deno.land/std/uuid/mod.ts";

export default () => uuid.generate();

next we will create service for db, for now db only write to json

import { DB_PATH } from "../config.ts";
import { Bahasa } from "../models/bahasa.ts";

export const fetchData = async (): Promise<Bahasa[]> => {
  const data = await Deno.readFile(DB_PATH);

  const decoder = new TextDecoder();
  const decodedData = decoder.decode(data);

  return JSON.parse(decodedData);
};

export const persistData = async (data): Promise<void> => {
  const encoder = new TextEncoder();
  await Deno.writeFile(DB_PATH, encoder.encode(JSON.stringify(data)));
};

create bahasa.ts in service

import { fetchData, persistData } from "./db.ts";
import { Bahasa } from "../models/bahasa.ts";
import createId from "../services/createId.ts";

type BahasaData = Pick<Bahasa, "title" | "author">;

export const getBahasas = async (): Promise<Bahasa[]> => {
  const bahasas = await fetchData();

  // sort by name
  return bahasas.sort((a, b) => a.title.localeCompare(b.title));
};

export const getBahasa = async (bahasaId: string): Promise<Bahasa | undefined> => {
  const bahasas = await fetchData();

  return bahasas.find(({ id }) => id === bahasaId);
};

export const createBahasa = async (bahasaData: BahasaData): Promise<string> => {
  const bahasas = await fetchData();

  const newBahasa: Bahasa = {
    id: createId(),
    title: String(bahasaData.name),
    author: String(bahasaData.role),
    added: new Date()
  };

  await persistData([...bahasas, newBahasa]);

  return newBahasa.id;
};

export const updateBahasa = async (
  bahasaId: string,
  bahasaData: BahasaData
): Promise<void> => {
  const bahasa = await getBahasa(bahasaId);

  if (!bahasa) {
    throw new Error("Bahasa not found");
  }

  const updatedBahasa = {
    ...bahasa,
    name: bahasaData.title !== undefined ? String(bahasaData.title) : bahasa.title,
    author: bahasaData.author !== undefined ? String(bahasaData.author) : bahasa.author,
  };

  const bahasas = await fetchData();
  const filteredBahasas = bahasas.filter(bahasa => bahasa.id !== bahasaId);

  persistData([...filteredBahasas, updatedBahasa]);
};

export const deleteBahasa = async (bahasaId: string): Promise<void> => {
  const bahasas = await getBahasas();
  const filteredBahasas = users.filter(bahasa => bahasa.id !== bahasaId);

  persistData(filteredBahasas);
};

and again i will define for error handling when failed to get route

i create new file named as error.ts

export default async ({ response }, next) => {
  try {
    await next();
  } catch (err) {
    response.status = 500;
    response.body = { msg: err.message };
  }
};

before we test this data i want to create example data in db/bahasas.json

[
  {
    "id": "1",
    "title": "PHP",
    "author": "Jone",
    "added": "2017-10-15"
  },
  {
    "id": "2",
    "title": "DART",
    "author": "Google",
    "added": "2017-10-15"
  }
]

and we can run it by do drun in terminal, and yes this is final part of basic deno, want to learn how to save to mysql or someting like mongodb, please give me comment

that it about model and route, next we will learn about handler to this route.

i hope you enjoy with this video, Don't forget to subscribe.

Thanks

Deno Model and Route

fiazhari@gmail.com.com — Wed, 03 Jun 2020 00:00:00 GMT

Hello everyone, iam fiaz luthfi and now you are on devindo youtube channel. in this video i will continue tutorial about deno, if you forget previous video, the link is above here.

and again before we start, now deno has become 1.0.4, you can upgrade it by do deno upgrade in your terminal

In this video i will talk about how create model data and how to create routeing.

let's jumpt to the first one. Before i have example data bahasa, there is

id
title
author

i will create this data to model, this example can be generailze, so if you have big data, you can modeling as your data, we know tipe data not much string, boolean, date, integer, double just that. so if you don't know about this, please give me comment

i create new file named as bahasa.ts

export interface User {
  id: String;
  title: string;
  author: string;
  // because this will save to database so better to add field date.
  added: Date;
}

next go to routing.ts, we will create routing CRUD

import { Router } from "https://deno.land/x/oak/mod.ts";

const router = new Router();

router
  .get("/bahasa", getBahasa)
  .get("/bahasa/:id", getBahasaDetails)
  .post("/bahasa", createBahasa)
  .put("/bahasa/:id", updateBahasa)
  .delete("/bahasa/:id", deleteBahasa);

export default router;

its became error cause we not create function to this refrence, we learn this next video,

last because we have define route we can change initial this to index.ts. remove router in this place.

import router from "./routing.ts";

// remove
const router = new Router();

that it about model and route, next we will learn about handler to this route.

i hope you enjoy with this video, and please give me comment. Don't forget to subscribe.

Thanks

Deno Handlers

fiazhari@gmail.com.com — Wed, 03 Jun 2020 00:00:00 GMT

Hello everyone, iam fiaz luthfi and now you are on devindo youtube channel. in this video i will continue tutorial about deno, if you forget previous video, the link is above here.

In this video i will talk about route handlers.

before we have define in route.ts now i will define route file of file handle

import getBahasa from "./handlers/getBahasa.ts";
import getBahasaDetails from "./handlers/getBahasaDetails.ts";
import createBahasa from "./handlers/createBahasa.ts";
import updateBahasa from "./handlers/updateBahasa.ts";
import deleteBahasa from "./handlers/deleteBahasa.ts";

firs we create fo getbahasa, i create new file in handlers getBahasa.ts, first import i define here is getBahasa but its became error because we never create this file, but no problem we will do latter

import { getbahasa } from "../services/bahasa.ts";

export default async ({ response }) => {
  response.body = await getbahasa();
};

this function to return all data bahasa, this like express we can define respone from body. next we create for getBahasaDetails.ts

import { getbahasa } from "../services/bahasa.ts";

export default async ({ params, response }) => {
  const bahasaId = params.id;

  if (!bahasaId) {
    response.status = 400;
    response.body = { msg: "Invalid bahasa id" };
    return;
  }

  const foundBahasa = await getbahasa(bahasaId);
  if (!foundBahasa) {
    response.status = 404;
    response.body = { msg: `User with ID ${bahasaId} not found` };
    return;
  }

  response.body = foundBahasa;
};

next for createBahasa.ts

import { getbahasa } from "../services/bahasa.ts";

export default async ({ request, response }) => {
  if (!request.hasBody) {
    response.status = 400;
    response.body = { msg: "Invalid bahasa data" };
    return;
  }

  const {
    value: { title, author }
  } = await request.body();

  if (!title) {
    response.status = 422;
    response.body = { msg: "Incorrect bahasa data. title are required" };
    return;
  }

  const bahasaId = await createUser({ title, author });

  response.body = { msg: "UserBahasa created", bahasaId };
};

next deletebahasa.ts

import { getbahasa } from "../services/bahasa.ts";

export default async ({ params, response }) => {
  const bahasaId = params.id;

  if (!bahasaId) {
    response.status = 400;
    response.body = { msg: "Invalid bahasa id" };
    return;
  }

  const foundBahasa = await getUser(bahasaId);
  if (!foundBahasa) {
    response.status = 404;
    response.body = { msg: `Bahasa with ID ${bahasaId} not found` };
    return;
  }

  await deleteBahasa(bahasaId);
  response.body = { msg: "Bahasa deleted" };
};

last i will create handle, if every route hit by user not found so i create noFound.ts

export default ({ response }) => {
  response.status = 404;
  response.body = { msg: "Not Found" };
};

and define this to index.ts

import notFound from "./handlers/notFound.ts";
app.use(notFound);

still work must we do, that it about handler, next we will learn about service as mention before

i hope you enjoy with this video, and please give me comment. Don't forget to subscribe.

Thanks

Deno Configuration

fiazhari@gmail.com.com — Wed, 27 May 2020 00:00:00 GMT

Hello everyone, iam fiaz luthfi and now you are on devindo youtube channel. in this video i will continue tutorial about deno, if you forget previous video, the link is above here.

before it now deno has become 1.0.2, you can upgrade i by do deno upgrade in your terminal

and deno has official extension in visual studi code, you can,uninstall extension before if you instaled and install the official one.

first one in this video i will tell you how to create enviroment configuration, so this video will be short.

to easily manage project, i create stucture like this.

handlers
// handlers contains route handlers
middlewares
// middlewares provide functions that run on every request
models
// models contain model definitions
services
// services contains... services
config.ts
// config.ts contains global application configuration, yes in this video we talk about this.
index.ts
// before is server.ts, this is a entry point of the application
routing.ts
// routing.ts contains API routes

before, we have create resource.ts it will be rename in next video, and this grouping to models, now just move this recource model to look clean,

this become read error, just fix it by define new route in index.ts

we will go to config.ts, before we have define, port and default host is localhost.

in node you know like env, yes same in deno, i will make env in config.ts

const env = Deno.env.toObject();
export const APP_HOST = env.APP_HOST || "127.0.0.1";
export const APP_PORT = env.APP_PORT || 3000;
// next i define for db path, in basic i just want write db to local json
export const DB_PATH = env.DB_PATH || "./db/bahasa.json"

go back to index.ts

import {APP_HOST, APP_PORT} from "./config.ts"

// you can change app listen to
app.listen(`${APP_HOST}:${APP_PORT})

lets test this project. before i create example with drun, you can upgrade drun

deno install --allow-read --allow-run --unstable -f https://deno.land/x/drun@v1.1.0/drun.ts

if you have install drun before use -f to rewrite

to easily run this project, i create drun.json like example, just copy, and add --allow-env couse we use env

just run by type drun, and lets see how its work.

that it about enviroment configuration, next we will learn about routing and model

i hope you enjoy with this video, and please give me comment. Don't forget to subscribe.

Thanks

Flutter Container

fiazhari@gmail.com.com — Wed, 27 May 2020 00:00:00 GMT

Hello everyone, iam fiaz luthfi and now you are on devindo youtube channel. You know flutter has container, but many of us, don't know what can we do more about this countainer. So we talk about this in deep

This is basic flutter project, you can be done to create this by do ‘flutter create name_project in your command line.

And this is basic of container, and i have set child text is devindo

Container(
    child: Text('Devindo')
)

First one we talk about color in container, inside container you can set color basic

color: Colors.blue
// also you can change color opacity by do
color: Colors:blue[500] // the code you can see when you do hover
// if you want to use theme color you can do
color: Theme.of(context).accentColor
// but if you have your code color you can covert it to hex and do like this to implement
color: Color(0xff303960) // dark blue

next we talk about padding and margin, if you don't know, margin is empty space to surround child. padding is empty space to inscribe child. to clearly, i try to make it

i create another one container and i set collor as green first container i set padding for all is 100.0, before continue, we will talk more about this EdgeInsets,

in this widget you have many option to set it, first .all is space all around this widget. but if you only set top only, or bottom, or left or right, you can do .only in this option has 4 option to set space. next is .symetric is option, create space horizontal or vertical, last is .fromWindowPadding, this is to create padding and set pixel ratio as widget, exampe i have padding 100 and pixel ratio is 1.1, so will come like this.

actualy edgeinserts have option lerp, but it is not be use in basic, this option can be use if we create something like animation. Want to explore about animation? please give a comment

next we talk about margin, berofe padding will make space inside, margin is the opposite, when we set padding, this option will make space inside this box, so if you want set space ouside, just implement margin.

alignment, this option will make child inside container move as you want, example choose postition bottomRight or another you can see this list. but this we not see the effect you can comment for padding to see how alignment is work

height and width this option will make size of container, you can set with double value, example hight 30, and width 100, or make it relative wih MediaQuery.of(). and set as you want.

clipBehavour this option will make your widget looks good example if you draw triangle, clipbeavhour will take effect of peformance, for detail you can read this article by raouf rahicle

constraints, this option it to make default size of your child widget, we not talk detail about this, cause this option has many option. example you can set BoxConstain with minimum hight is 100.0. but easily this option will work if you not set exacly number for hight or widhth before, exampe i will comment for hight and set max hight is 300.0

next is decoration also for this option has many option, for exampe i want to set his container have a line border with red color, so you can set boxdecoration and border.all( colors: Colors.black, witdh:10), this will became error because we have set color ouside box, so this color must inside here. also for this option you can set for border radius, or set image as backround, gradient, background blendmode to blend color of this decoration, also you can set of shape.

last we talk about transfrom, this option is to apply matrix before paint container. example i want rotate this container in z direction so you can do Matrix4.rotationZ(0.1) this valu has minimum is zero and maximum is one

that it about container in flutter i hope this video help you understand more about this widget, and please give me comment. Don't forget to subscribe.

Thanks

Create Dropdown in flutter

fiazhari@gmail.com.com — Tue, 26 May 2020 00:00:00 GMT

Hello everyone, iam fiaz luthfi and now you are on devindo youtube channel. in this video i will tell you how to create dropdown with flutter, for first one we will create dropdown basic, and after that we create dropdown from list. when this is done you can create easily dropdown from local json or from rest api.

okey let’s jump to first one.

this is basic flutter project, you can be done to create this by do ‘flutter create name_project in your command line,

to create dropdown, you can do inside body of stateless or statefull

// this is initial param
var valueGender;
// and write in dropdown in the body
DropdownButton(
    hint: Text("Select Gender"),
    value: valueGender,
    items: <String>['Male', 'Female', 'Undifine'].map((value) {
        return DropdownMenuItem(
            child: Text(value),t
            value: value,
        );
    }).toList(),
    onChanged: (value) {},
),

you will look like this. if you want to pass data when select dropdown, you can define, setter and getter for example

// before we set text to direcly know what inside value gender
Text('$valueGender')

// and setter
onChanged: (value) {
    setState({
        valueGender = value;
    })
},

let see how its work,

before we continue to next section, we can handle error when refresh or getting null by set default value example

_valueGender = 'Male';

and the second, if you have many list in this dropdown, this code will look ugly, you can sparate this list direcly in your stateless or statefull, example i have list name of my friend

List<String> names = [
    'Rangga',
    'Renaldy',
    'Erwin',
    'Rendy',
    'Ruli'
]
// you can direcly call this list to your dropdown
items: names.map((value) {
    return DropdownMenuItem(
        child: Text(value),
        value: value,
    );

so how to create dropdown when value from rest api?, first you must set depedency http in your pubspec.yaml,

in this wi will parse data country from this REST API https://restcountries.eu/rest/v2/all

http: ^0.12.1

// import http on your page of project, you have learn advance of flutter you can sparate between logic and view, but in this tutorial i will show booth in one widget

import 'package:http/http.dart' as http;

String _baseUrl = "https://restcountries.eu/rest/v2/all";
String _valCountry;
List<dynamic> _dataCountry = List();
void getProvince() async {
    final respose = await http.get(_baseUrl); 
    var listData = jsonDecode(respose.body);
    setState(() {
      _dataCountry = listData;
    });
    print("data : $listData");
}

@override
void initState() {
    super.initState();
    getProvince(); 
}

DropdownButton(
    hint: Text("Select Province"),
    value: _valCountry,
    items: _dataCountry.map((item) {
    return DropdownMenuItem(
        child: Text(item['name']),
            value: item['name'],
        );
    }).toList(),
    onChanged: (value) {
        setState(() {
            _valCountry = value;
        });
    },
),

when you have a lot of data this method will take time, and you can _dataCountry has value or not to avoid error

if(_dataCountry.length > 0)

last in this tutorial is how to create dropdown image?, first define your image location in this example i put image in folder assets, so just define in pubspec.yaml

assets:
    - assets/

// so i have 3 image and i will create dropdown about this

String _filter = 'All'

DropdownButton<String>(
    underline: SizedBox(),
    hint: Image.asset(
              'assets/All.png',
              scale: 3,
    ),
    value: _filter,
    items: <String>['All', 'One', 'Two'].map((String value) {
        return DropdownMenuItem<String>(
            value: value,
            child: Row(
                children: <Widget>[
                    Image.asset(
                      'assets/$value.png',
                      scale: 3,
                    ),
                  ],
                ),
              );
        }).toList(),
    onChanged: (val) {
        setState({
            _filter = val
        })
    },
),

and this is all about dropdwon in flutter, i hope you enjoy with this tutorial, and please give me comment about this video. Don't forget to subscribe. Thanks

Dasar Golang

fiazhari@gmail.com.com — Sun, 08 Mar 2020 00:00:00 GMT

Bahasa go menjadi sangat populer di kalangan backend, selain mudahnya mempelejari go juga menjamin performa yang signifikan dibaging bahasa lainnya.

nah untuk pertmakali kita harus menginstall go dan bisa di lihat pada dokumen resminya yaitu golang.org

untuk membuat project pertama kali kita harus mendefinisikan package yang akan kita gunakan yaitu

package main

import (
	"fmt"
)

untuk menjalan kannya kalian bia menggunakan perintah go run namafile.go

untuk pertama kita belajar tipe data yaitu variable, hampir sama dengan bahasa pemrograman lain variable dapat di definisikan sebagai var


var pelajaran = "DART"
func main(){
	fmt.Println("Hallo devindo..."+ pelajaran + " " + pelajaran2);
}

yap untuk menjalankannya kita butuh fungsi main di setiap runnernya. nah enaknya lagi kita bisa mendefinisikan variable ini di dalam satu line contoh

var namadepan, namabelakang = "fiaz","luthfi"

nah di go juga kita bisa menganti var dengan := tapi ini hanya bisa kita gunakan di dalam fungsi contoh

func main(){
    kampus := "Binus"
	fmt.Println("Hallo devindo..."+ kampus);
}

selain variable string seperti di atas ada juga numerik yaitu int atau integer, ada juga float yang bisanya di deteksi langsung ketika penulisannya menggunakan koma koma

func main(){
    kampus := "Binus"
    tanggal := 8
    berat := 55.5
	fmt.Println("Hallo devindo..."+ kampus);
	fmt.Println("Tanggal ", tanggal);
}

Kalo ngeformat integer ke string dan sebaliknya gimana?

import (
	"strconv"
)

func main(){
    tanggal := 8
    total := "10"
	fmt.Println("Tanggal " + strconv.itoa(tanggal));
	fmt.Println("Tanggal ",  strconv.itoa(total));
}

Kita mainan lebih dalam di fungsi ini, untuk pertama mengenai return

contoh

func printNumber() int{
    return 10
}

func main(){
    fmt.Println("Fungsi ini balikannya", printNumber())
}

selanjutnya biar mudah dan rapi kita bikin folder routes di folder lib dan bikin file namanya routing_a.dart

isinkan standar stateless seperti ini

import 'package:flutter/material.dart';

class RouteA extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text("Welcome to Route A"),
          ],
        ),
      ),
    );
  }
}

Setelah itu kita balik lagi ke main.dart dan bikin button untuk kita navigasiin ke Route A

FlatButton(
    onPressed: () {},
    child: Text('Bawa Ke Halaman A'),
)

Nah kita sekarang implementasi untuk routingnya, di taruh di onpress, di situ kita bisa menggunakan push maupun pushNamed bedanya kalo push kita harus mendefinisikan routenya, kalo pushNamed tinggal kita panggil nama yang udah di definisiin. oke langsung kita coba aja definisiin routingA ini ke main.dart pada MaterialApp

    return MaterialApp(
      title: 'Flutter Routing',
      routes: {
        'routeA':(context) => RouteA()
      },
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Routing dan Navigasi'),
    );

Implementasinya

RaisedButton(
    onPressed: () {
        Navigator.of(context).pushNamed('routeA');
    },
    child: Text('Bawa Ke Halaman A'),
)

Nah kalo push aja gimana caranya hampir sama, kita contohin seperti di atas, kita bikin dulu file baru dengan nama routing_b.dart dengan isi standar juga dan definisikan button di halaman main.dart

RaisedButton(
    onPressed: () {
        Navigator.push(
            context,
            MaterialPageRoute(
                builder: (context) => RouteB(),
            ),
        );
    },
    child: Text('Bawa Ke Halaman B'),
)

Nah selanjutnya kita masuk pada pembahasan pop dan popUntil, sederhananya pop adalah balik ke halaman sebelumnya

Ini sangat sederhana, kita masuk ke file routing_a.dart dan bikin standar flat button dan definisikan navigator pop seperti ini

RaisedButton(
    child: Text("Back to home"),
    onPressed: () {
        Navigator.pop(context);
    },
),

nah selanjutnya popUntil kapan digunakan, ketika kita ingin balik ke halaman semula atau halaman yang awal banget contoh kita dari route a ke b, kalo pake pop dari b pasti balik ke a tp kalo pake popUntil kita bisa balik ke halaman awal nah kita contohin aja, tp sebelum itu sekalian kita bikin button di route a biar ga bolak balik

RaisedButton(
    child: Text("route B from A"),
    onPressed: () {
        Navigator.push(
            context,
            MaterialPageRoute(builder: (context) => RouteB()),
        );
    },
)

cara pakainya kita bikin button di halaman b kayak gini

RaisedButton(
    child: Text("Go back all the way to home"),
    onPressed: () {
        Navigator.popUntil(context, ModalRoute.withName(Navigator.defaultRouteName));
    },
)

taraaa udah beres sangat mudah bukan, sourcodenya bisa dilihat di github saya yah, nah sebagai penutup kita definisin juga ketika ga nemuin routingnya caranya

return MaterialApp(
      title: 'Flutter Demo',
      onUnknownRoute: (RouteSettings setting) {
        return new MaterialPageRoute(
                    builder: (context) => NotFoundPage()
        );
      },
....
..

Kalo masih kurang jelas silahkan tonton video youtube saya ya devindo

Semoga bermanfaat

Flutter Navigation dan Routing

fiazhari@gmail.com.com — Sat, 22 Feb 2020 00:00:00 GMT

Kali ini kita akan belajar basic flutter mengenai navigasi dan routing. Yap ini sebenernya basic banget tapi ini paling sering kita pakai untuk pergi ke halaman atau balik lagi di layar yang kita pengenin, nah kali ini kita akan fokus bahas:

push
pushNamed
pop
popUntil

Kenapa 4 saja? kare ini ini paling basic banget yang bisa kita gunain untuk seluruh project di flutter. Langsung aja pertama kita bikin project flutter

  create flutter routing

selanjutnya di file main.dart hapus komentar dan element yang ga kita pake, jadinya kayak gini

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Routing',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Routing dan Navigasi'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Siap untuk implementasi routing dan navigasi?',
            ),
          ],
        ),
      ),
    );
  }
}

selanjutnya biar mudah dan rapi kita bikin folder routes di folder lib dan bikin file namanya routing_a.dart

isinkan standar stateless seperti ini

import 'package:flutter/material.dart';

class RouteA extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text("Welcome to Route A"),
          ],
        ),
      ),
    );
  }
}

Setelah itu kita balik lagi ke main.dart dan bikin button untuk kita navigasiin ke Route A

FlatButton(
    onPressed: () {},
    child: Text('Bawa Ke Halaman A'),
)

    return MaterialApp(
      title: 'Flutter Routing',
      routes: {
        'routeA':(context) => RouteA()
      },
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Routing dan Navigasi'),
    );

Implementasinya

RaisedButton(
    onPressed: () {
        Navigator.of(context).pushNamed('routeA');
    },
    child: Text('Bawa Ke Halaman A'),
)

RaisedButton(
    onPressed: () {
        Navigator.push(
            context,
            MaterialPageRoute(
                builder: (context) => RouteB(),
            ),
        );
    },
    child: Text('Bawa Ke Halaman B'),
)

Nah selanjutnya kita masuk pada pembahasan pop dan popUntil, sederhananya pop adalah balik ke halaman sebelumnya

Ini sangat sederhana, kita masuk ke file routing_a.dart dan bikin standar flat button dan definisikan navigator pop seperti ini

RaisedButton(
    child: Text("Back to home"),
    onPressed: () {
        Navigator.pop(context);
    },
),

RaisedButton(
    child: Text("route B from A"),
    onPressed: () {
        Navigator.push(
            context,
            MaterialPageRoute(builder: (context) => RouteB()),
        );
    },
)

cara pakainya kita bikin button di halaman b kayak gini

RaisedButton(
    child: Text("Go back all the way to home"),
    onPressed: () {
        Navigator.popUntil(context, ModalRoute.withName(Navigator.defaultRouteName));
    },
)

taraaa udah beres sangat mudah bukan, sourcodenya bisa dilihat di github saya yah, nah sebagai penutup kita definisin juga ketika ga nemuin routingnya caranya

return MaterialApp(
      title: 'Flutter Demo',
      onUnknownRoute: (RouteSettings setting) {
        return new MaterialPageRoute(
                    builder: (context) => NotFoundPage()
        );
      },
....
..

Kalo masih kurang jelas silahkan tonton video youtube saya ya devindo

Semoga bermanfaat

Flutter Localization dengan Flappy Translator

fiazhari@gmail.com.com — Sun, 16 Feb 2020 00:00:00 GMT

Ketika kita bikin aplikasi pasti utamanya adalah di pakai untuk kalangan sendiri, tp kan pengen juga aplikasi ini di pahami orang luar, terutama yang mau kita targetin seperti orang yang hariannya pake bahasa inggris atau china atau bahkan bahasa spanyol

Nah untuk mengatasi itu kita bisa pakai localization di flutter. Tapi ada ribetnya ketika kita harus menterjemahkannya satu persatu. Nah ini kita bisa mengatasinya dengan plugin flappy translator.

Yuk lah langsung kita bahasa aja untuk pertama. Kita bisa menyediakan dulu file yang akan kita translate, kita bisa mengunakan google sheet untuk mempermudahnya untuk di convert menjadi csv

keys	fr	en	es	de_CH
appTitle	Ma super application	My awesome application	Mi gran application	Meine tolle App
subtitle	Un sous titre	A subtitle	Un subtitulò	Ein Untertitel
description	Un texte avec une variable : %1$s	Text with a variable: %1$s	Un texto con una variable : %1$s	Text mit einer Variable: %1$s
littleTest	"Voici, pour l'exemple, ""un test"" avec la variable %age$d"	"Here is, for the example, ""a test"" with the variable %age$d"	"Aqui esta, por ejemplo, ""una prueba"" con la variable %age$d"	"Hier ist, zum Beispiel, ""ein Test"" mit der Variable %age$d"

nah contoh di atas bisa kita permudah dengan bantuan google translate di google sheet dengan cara

  =GOOGLETRANSLATE(<Posisi Kolom>;"en";"fr")

kalo udah tinggal di download sebagai csv.

Selanjutnya kita setup untuk depedency di flutternya.

Jadi di sini saya anggap semua udah bisa install flutter jadi tinggal tambahin depedency

    dependencies:
        flutter_localizations:
        sdk: flutter
        flappy_translator:

untuk versi flappy bisa di cek disini

kalo udah di setup depedency nya lakukan

    flutter pub get
    flutter pub run flappy_translator <nama_file.csv>

otomatis nanti akan di generate menjadi i18.dart

Selanjutnya tinggal kita implement pada main.dart kita

  class MyApp extends StatelessWidget {
    @override
        Widget build(BuildContext context) {
            return MaterialApp(
            localizationsDelegates: [
                const I18nDelegate(),
                GlobalMaterialLocalizations.delegate,
                GlobalWidgetsLocalizations.delegate,
            ],
            supportedLocales: I18nDelegate.supportedLocals,
            home: Home(),
            );
        }
    }

Udah beres tinggal cara pemakainnya, gampang sih, pada text tinggal kita panggil sesuai keynya contoh

   Text(I18n.of(context).appTitle),

taraaa udah beres sangat mudah bukan

Kalo masih kurang jelas silahkan tonton video youtube saya ya devindo

Semoga bermanfaat

Basic Python

fiazhari@gmail.com.com — Mon, 09 Dec 2019 00:00:00 GMT

Sesekali dapat project machine learning dengan python, karena nilainya sangat tinggi, iyain aja padahal sebelumnya belum pernah belajar sekalipun, nah sekalian belajar di dokumentasiin aja

Variable dan type, enaknya di python tidak harus di definisiin satu satu jadi kompailernya udah bisa ngenalin sendiri setiap typenya

  nama = "fiaz"
  tingkat = 2
  berat = 55,2
  print(nama)
  print(tingkat)
  print(berat)

Selanjutnya list, ini hampir sama kayak pemrograman lain tinggal di kasih kurung bracket udah di identifikasi sebai list

    nomor = []
    string = ['erik','wisnu','nadiem']
    nomor.append(1)

nah di atas adalah contoh untuk validasi ketika si value kurang dari 2 maka muncul notif validasi 'Lebih panjang lagi dong'

ini berlaku juga untuk validasi lainnya, kayak validasi untuk nomor atau email bisa juga tinggal pakai

Validasi Email

  validator: (val) {
    Pattern pattern =
                      r'^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$';
    RegExp regex = new RegExp(pattern);
    return (!regex.hasMatch(val))
        ? 'Masukin email yg bener'
        : null;
    },

Validasi Nomor

  validator: (value) {
    Pattern patttern = r'(^(?:[+0]6)?[0-9]{10,12}$)';
    RegExp regExp = new RegExp(patttern);
    return (!regExp.hasMatch(value))
        ? 'Nomor aja jangan yg lain'
        : null;
    },

Nah kalo kita mau lanjut ke next step, validasi untuk buttonnya contohnya

   FlatButton(
        child: Text('Lanjut'),
            onPressed: () {
            if (_formKey.currentState.validate()) {
                // Lakukan sesuatu
            }
    })

Kalo masih kurang jelas silahkan tonton video youtube saya ya devindo

Semoga bermanfaat

Validasi Form Flutter

fiazhari@gmail.com.com — Mon, 09 Dec 2019 00:00:00 GMT

Validasi form sebelum lanjut ke tahap berikutnya sangat penting buat aplikasi kita, apalagi kalo ada requirement harus di isi, nah ini wajib banget kita implement di setiap form, untuk itu kita harus menginisiasi Global key untuk form state di dalam statefull widget kita

  GlobalKey<FormState> _formKey = GlobalKey<FormState>();

nah kalo udah di inisiasi tinggal kita warp si textform kita dengan form dan key nya set dengan global key yg di atur di atas contoh

    Form(
        key: _formKey,
        child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              TextFormField(
                validator: (value) {
                  if (value.length < 2) {
                    return 'Lebih panjang lagi dong';
                  }
                },
              )
            ],
        ),
    ),

nah di atas adalah contoh untuk validasi ketika si value kurang dari 2 maka muncul notif validasi 'Lebih panjang lagi dong'

ini berlaku juga untuk validasi lainnya, kayak validasi untuk nomor atau email bisa juga tinggal pakai

Validasi Email

  validator: (val) {
    Pattern pattern =
                      r'^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$';
    RegExp regex = new RegExp(pattern);
    return (!regex.hasMatch(val))
        ? 'Masukin email yg bener'
        : null;
    },

Validasi Nomor

  validator: (value) {
    Pattern patttern = r'(^(?:[+0]6)?[0-9]{10,12}$)';
    RegExp regExp = new RegExp(patttern);
    return (!regExp.hasMatch(value))
        ? 'Nomor aja jangan yg lain'
        : null;
    },

Nah kalo kita mau lanjut ke next step, validasi untuk buttonnya contohnya

   FlatButton(
        child: Text('Lanjut'),
            onPressed: () {
            if (_formKey.currentState.validate()) {
                // Lakukan sesuatu
            }
    })

Kalo masih kurang jelas silahkan tonton video youtube saya ya devindo

Semoga bermanfaat

Deteksi Keyboard Flutter

fiazhari@gmail.com.com — Mon, 02 Dec 2019 00:00:00 GMT

Suatu saat aplikasi grab saya ter-logout otomatis, entah kenapa mungkin memang ada pembaruan di sistemnya, dan pas mau login lagi loh kok ini unik ya, keyboard muncul button bawah hilang dan ada button baru, bisa ga sih di implementasi di flutter?

jadi idenya cuma deteksi keyboard ini mah harusnya gampang. nah untuk deteksi keyboard gimana caranya?

ya betul kita manfaatin media query, media query bisa ngedeteksi lebar atau luas layar kita. biasanya kalo kita mainan responsivenya cuma deteksi size witdth atau height. nah kita deteksi kalo ada inset di bottomnya

  MediaQuery.of(context).viewInsets.bottom

nah dari sini kita dapaet nih apakah di bottom layar ada tambahan, dimana kalo enggak kan defaultnya di 0.

Udah deh beres idenya, ini udah bisa kita implement untuk deteksi open atau close.

kita contohin untuk kasus yang grab tadi caranya, kita bikin fungsi boolean untuk deteksi apakah di default 0 atau enggak

  bool _keyboardIsVisible() {
    return !(MediaQuery.of(context).viewInsets.bottom == 0.0);
  }

Implementasi di codenya gimana? ya tinggal manfaatin if if gitu, lebih lengkapnya bisa tonton video saya di youtube devindo ya, dan sourcodenya ada di bawah video

Semoga bermanfaat

Panduan Singkat Git

fiazhari@gmail.com.com — Mon, 02 Dec 2019 00:00:00 GMT

Sering kali saya tidak ingat untuk perintah perintah sederhana di git, ini sebenernya karena tidak tiap saat pake perintah aja, kayak bikin branch delete atau perintah yang jarang kita pake pasti banyak sedikitnya lupa, nah biar enak saya dokumentasiin aja di sini biar kalo lupa tinggal buka duende

Mengecek list branch

  git branch -a

Pindah-pindah branch

  git checkout nama_branch

Membuat branch baru di lokal

  git checkout -b nama_branch_baru

Push branch baru

  git push origin nama_branch_baru

Delete branch

  git push origin :nama_branch_baru

Update branch kalau dari official/master repo ada update

  git fetc nama_branch_official

nah itu dulu aja paling, karena ini bersifat dokumentasi ya ini bermanfaat buat saya, dan semoga buat anda juga

Jangan lupa subscribe youtube saya yah devindo

Semoga bermanfaat

Crawling Instagram Gempi

fiazhari@gmail.com.com — Tue, 16 Apr 2019 00:00:00 GMT

Cwaling data merupakan suatu hal yang mungkin kita butuhkan untuk menganalisa sesuatu, data ini kita bisa dapet dari website atau social media, tapi ga semua social media bisa open datanya contoh kayak facebook banyak sekali akses yang di tutup sehingga susah untuk crawling datanya.

Nah masih seperusahaan sama facebook instagram sebagian datanya masih bisa di buka sehingga mudah untuk mendapatkan datanya, salah satu kita bisa ambil berdasarkan hastag. https://www.instagram.com/explore/tags/gempi/

nah untuk mendapatkan jsonnya kita tinggal tambahin ?__a=1 langsung deh kita dapet file jsonnya, nah dari sini kita mulai untuk bikin scrappernya dan kali ini pake nodejs langsung saja ikuti

mkdir instagram-crawling
cd instagram-crawling
npm init -y
npm i axios
touch index.js

Kalo udah buka folder/index.js dengan program editor kalian. nah selanjutnya kita coba ambil json ini dengan axios

const axios = require('axios');

function getIG() {
  axios.get("https://www.instagram.com/explore/tags/gempi/?__a=1").then(res =>
    console.log(res.data)
  );
}

getIG();

nah udah dapetkan jsonnya kalo mau ngambil mentah itu bisa langsung ambil kita export ke file json kita pake fs

const axios = require("axios");
const fs = require("fs");

function getIG() {
  axios.get("https://www.instagram.com/explore/tags/gempi/?__a=1").then(res => {
    fs.writeFile("instagram.json", JSON.stringify(res.data, null, 4), res =>
      console.log("Success Writen")
    );
  });
}

getIG();

nah nanti otomatis akan nulisin file json yang kita kasih judul instagram kayak di atas itu, kalo di lihat json.stringify ada null dan 4 itu untuk merapikan file jsonnya.

Coba kita detailin lagi, jadi maksudnya kalo itu kan json mentah nah kalo mau ngambil yang topnya aja gimana? tinggal kita bikin fungsi looping untuk node yang kita pilih disini saya contohin node top

function topIG() {
  axios.get("https://www.instagram.com/explore/tags/gempi/?__a=1").then(res => {
    const item = res.data.graphql.hashtag.edge_hashtag_to_top_posts.edges;
    fs.writeFile("topinstagram.json", JSON.stringify(item, null, 4), res =>
      console.log("Success Writen")
    );
  });
}

nah bedanya di responnya itu kita detailin ke item edge_hastag_to_top_posts kalo kalian lihat jsonnya pasti untuk detail di top post dapet jumlah like dan lainnya, nah kalo kalian mau download photo-photonya tinggal di foreach lalu di ambil deh itu

Semoga bermanfaat NB. jangan di manfaatkan untuk hal yang tidak berguna yah

React Hooks, penerapan di REST API

fiazhari@gmail.com.com — Fri, 12 Apr 2019 00:00:00 GMT

Ga nyangka seminggu ini rasanya happy banget setelah terjun di project react. Iya gua sebelumnya jujur belum pernah nyentuh reactjs, kalo react native sih udah tapi ampun deh mumet mikirin untuk mobile pake react native tuh

Nah sampailah gua pertemuan dengan si react ini, kenapa? karena pertama pas gua mau jump ke proyek vue yang ya bisa di bilang gua tau kok kayaknya ribet ada library yang ga ada nih di vue tapi ada di react. Iya tau sendiri kan programmer mah pengennya yang simple ga usah ribet bikin fungsi sendiri kalo udah ada yang bikin. Nah sampailah gua pada kebutuhan hooks ini, tapi sebenernya belum butuh banget sih, tapi sekalian lah buat catatan siapa tau nanti gua butuh untuk implement ini.

Oke langsung aja pertama kita bikin project react kosongan, pasti tau kan harus buka terminal? oke ikutin ini kalo udah

npx create-react-app du-hooks
cd du-hooks
npm start

apa bedanya npx dengan npm? sederhannya kalo npm mah harus instal atu-atu di lokal kita, kalo npx ga harus install langsung si fungsinya itu ngedownload dari cloud.

nah kalo pas npm start ada eror pajang banget coba baca, kalo ada warning SKIP_PREFLIGHT_CHECK=true nah pasang aja itu di env nya kalo selain itu coba di browsing erornya

karena kita fokusnya di penerapan hooks langsung saja maninan di `src/App.js

hapus dan ganti dengan kode berikut biar langsung ngikutin

import React, { Component } from "react";
import "./App.css";

class App extends Component {
  constructor() {
    super();
    this.state = {
      data: []
    };
  }
  componentDidMount() {
    axios.get("https://jsonplaceholder.typicode.com/posts").then(res => {
      const data = res.data;
      this.setState({
        data
      });
    });
  }
  render() {
    return (
      <div className="App">
        {this.state.data.map(item => (
          <p key={item.id}>{item.title}</p>
        ))}
      </div>
    );
  }
}

export default App;

Perlu penjelasan ga? ah tonton video gua aja ya

function App() {
  const [data, setData] = useState([]);

  useEffect(() => {
    axios
      .get("https://jsonplaceholder.typicode.com/posts")
      .then(result => setData(result.data));
  }, []);

  return (
    <div className="App">
      {data.map(item => (
        <p key={item.id}>{item.title}</p>
      ))}
    </div>
  );
}

nah di atas ini udah di convert ke hooks lebih simple kan? oke penjelasannya di video berikut ya

devindo

Semoga bermanfaat

Deploy page atau static web di gitlab dan cara seting domain sendiri

fiazhari@gmail.com.com — Sat, 23 Mar 2019 00:00:00 GMT

Ketika budget client kecil dan satu sisi kita pengen ngehemat, dengan maksud karena biasanya kalo client budget kecilkan kalo ga ribet banyak maunya ya pokoknya jadi

Nah sebenernya saya punya hosting yang ya lumayan gede untuk ngedeploy web-web static, tapi kan kalo banyak pasti ribet juga apalagi kalo mainan pake node, udah siap siap bengkak aja tuh hosting

nah kali ini saya mau nulis cara deploy page website pake gatsby, kalian bisa aja pake hugo, vuepress atau yang lain gitu.

Nah mungkin saya asumsikan kalian udah bikin web di gatsby yah, atau kalo belum kalian bisa clone themplate yang di sediain, dengan itu kalian bisa mengikutin tutorial ini

npm install -g gatsby-cli
gatsby new gatsby-site
cd gatsby-site
gatsby develop

Dengan mengikuti shell di atas saya rasa kalian langsung bisa yah, dan gampang itu tinggal pake atau edit edit, untuk selengkapnya kalian bisa baca tutorial membuat website dengan gatsby disini

Nah berarti udah punya kodingan yang siap kita deploy di gitlab pages, dan untuk kali ini juga saya menganggap kalian udah punya akun di gitlab dan bisa ngepush kodingan disana

Nah kalo udah ini sebernya gampang banget untuk ngedeploynya pertama atur dulu untuk path directorynya, jadi kalo kalian buka link gitlab kalian tepat di projectnya akan jadi contoh kayak gini https://gitlab.com/hifiaz/infohondamalang

nah di sini yang saya maksud path adalah infohondamalang path ini kita atur di dalam file namanya gatsby-config.js langsung aja tambahin modulnya

module.exports = {
  pathPrefix: `/infohondamalang`,
}

nah selanjutnya kita bikin gitlab ci, atau sederhananya perintah otomatis yang kita buat ketika kita ngepush ke gitlab. Eh ngertikan maksudnya, jadi kalo kalian mainan gatsby kan biasnaya harus gatsby develop, nah trus milih pathnya dan lain lain lah, nah ini kita bikin otomatis dengan bantuan gitlab ci.

Caranya kita bikin file baru dengan nama .gitlab-ci.yml bisa manual bisa juga kayak gini

touch .gitlab-ci.yml

nah di dalamnya kita isi kayak gini

image: node:latest

cache:
  paths:
    - node_modules/

pages:
  script:
    - npm install
    - ./node_modules/.bin/gatsby build --prefix-paths
  artifacts:
    paths:
      - public
  only:
    - master

Perlu penjelasan ga? pasti perlu lah ya, intinya barus paling atas itu untuk definisiin akan node paling terbaru. Selanjutnya cache, nah kalo udah install npm kan biasanya jarang banget ada update mending di cache biar ga ngabisin resource, jadi intinya cache, apa ya bahasa indonesianya, pokonya biar inget ga instal-instal lagi gitulah. Pages, nah pertama itu biasa sama kayak npm install gitu, directory node modulesnya, trus artifact ini adalah halaman yang di akses jadi kalo di gatsby build kan jadinya ada folder public nah folder ini yang di akses, selanjutnya only: - master itu adalah branch yang akan di deploy.

Kalo udah kalian bisa pergi ke menu Settings->Pages kalo udah ada Access pages berarti udah berhasil

Selanjutnya gimana cara ngatur domain tinggal masuk ke menu new domain, lalu isikan domain kalian, iya lagi-lagi saya anggap kalian sudah punya, contoh disini saya pakai infohondamalang.id lalu klik create new domain, untuk certificate dan key kosongin aja lebih dulu. Nah kalo ada eror https gitu, uncheck Force HTTPS menu sebelumya tadi

Lebih detailnya lagi atau lengkapnya untuk domain ini bisa tontoh video tutorial di youtube saya yah devindo

Semoga bermanfaat

Pindah hosting ke netlify

fiazhari@gmail.com.com — Fri, 22 Mar 2019 00:00:00 GMT

Hari ini tepat setelah makan mie ayam di tempat langganan, muncul niat untuk merapikan website ini, yang jadi mata pencaharian saya saat ini.

Iya sebagai freelance developer harus sering sering nampilin portofolio, selain dari linkedin yang menurut saya terlalu tertutup, maksudnya harus login dulu untuk lihat profile orang, ya mending untuk pindah ke personal web orang bebas baca dan yang jelas kalian harus tau gatsby keren banget.

Saya menggunakan framework gatsby ini sudah hampir satu tahun lebih, karena kemudahan dan ga ribet, dan udah beberapa project yang terselesaikan dengan gatsby ini.

Tapi pastilah ya di mana-mana kalo udah sibuk lupa akan rumah, sama kayak saya ini lupa untuk ngurus website ini, karena pengennya cepet akhirnya saya ambil thema website ini dari Tania Rascia, developer wanita yang selalu saya kagumi.

Awalnya mikir untuk ngebuild di hosting pribadi, tapi di pikir-pikir males ribet ngedeploy deploy. Akhirnya dengan senang hati pindah ke netlify, iya udah tau dari lama karena si netlify ini kalo ga salah memang paling awal nyediain plugin untuk gatsby, jadi paling mudah dan sering di pakai developer, selain itu free. Iya ini paling penting free

Dengan netlify ini kita juga bisa custome domain, tapi cuma satu ya kalo mau lebih harus bayar, berapanya silahkan tengok langsung ke netlify

Dengan website tampilan baru ini juga saya akan mindahin script yang tadinya saya tulis untuk serial di youtube disini. Iya memang sebelumnya saya malas untuk nulis di blog, tapi ya ga ada salahnya kan kalo sharing-sharing.

Semoga bermanfaat

Duende

About me

Some things I like

Links

Music

Timeline

Currently Using

Terms and Conditions

Luthfi Azhari

Developer

Technical Skills

Experience

Freelance Developer

Project Manager Acquisition

UI Developer, Co-Head Information Technology, Project Manager

UI Designer

Grapich Designer

Internship

Projects

Education

Master of Computer Science

Bachelor of Information System

Associate of Informatics Management

Accomplishments

Privacy Policy

Modal menjadi web developer

Deno Service

Deno Model and Route

Deno Handlers

Deno Configuration

Flutter Container

Create Dropdown in flutter

Dasar Golang

Flutter Navigation dan Routing

Flutter Localization dengan Flappy Translator

Basic Python

Validasi Form Flutter

Deteksi Keyboard Flutter

Panduan Singkat Git

Crawling Instagram Gempi

React Hooks, penerapan di REST API

Deploy page atau static web di gitlab dan cara seting domain sendiri

Pindah hosting ke netlify