ساخت کارت ویزیت در اپلیکیشن
یکی از صفحات متداول اپلیکیشنها صفحه “درباره ما” هست که معمولا در این صفحه اطلاعاتی از اعضای تیم قرار داده می شود. ما در این مقاله نحوه ساخت پروفایل کاربری به صورت کارت را به شما آموزش می دهیم. در ادامه قادر خواهید بود برای هر یک از اعضای تیم در صفحه “درباره ما” چیزی شبیه کارت ویزیت بسازید که شامل نام فرد، تصویر، سمت و اطلاعات تماس فرد می باشد.
مراحل ساخت کارت ویزیت در اپلیکیشن
وارد پنل ساخت اپلیکیشن با آدرس http://make.appsaz.ir شوید و در بخش امکانات ، امکان “سورس کد” را انتخاب نمایید.
در صفحه باز شده کد زیر را وارد کنید.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 300px;
margin: auto;
text-align: center;
font-family: arial;
}
.title {
color: grey;
font-size: 18px;
}
button {
border: none;
outline: 0;
display: inline-block;
padding: 8px;
color: white;
background-color: #000;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px;
}
a {
text-decoration: none;
font-size: 22px;
color: orange;
}
button:hover, a:hover {
opacity: 0.7;
}
</style>
</head>
<body>
<h2 style="text-align:center">پروفایل کاربری</h2>
<div class="card">
<img src="https://appsaz.ir/wp-content/uploads/2017/02/d.png" alt="" style="width:100%">
<h1>امیر درجه</h1>
<p class="title">مدیر اپ ساز</p>
<div style="margin: 24px 0;">
<a href="https://www.linkedin.com/in/amir-darajeh-40969841/"><i class="fa fa-linkedin"></i></a>
</div>
<a href="mailto:info@appsaz.ir"><button>تماس</a></button></a>
</div>
</div>
</body>
</html>
خروجی نهایی در اپلیکیشن موبایل به صورت تصویر زیر می باشد.
در صورتی که کاربر بر روی آیکن لینکدین کلیک نماید به صفحه شخصی این فرد در لینکدین هدایت می شود. همچنین با کلیک بر روی دکمه تماس امکان ارسال ایمیل مستقیم به این فرد را پیدا می کند.
کد ارسال ایمیل در بالا به صورت زیر مشخص شده است که شما برای ساخت کارت ویزیت لازم است به جای متن قرمز رنگ آدرس ایمیل مورد نظر خود را قرار دهید.
<a href="mailto:info@appsaz.ir"><button>تماس</a></button></a>
همچنین برای تغییر آدرس لینکدین متن قرمز رنگ زیر را در کد تغییر دهید.
<a href="https://www.linkedin.com/in/amir-darajeh-40969841/"><i class="fa fa-linkedin"></i></a>
در این قسمت از کد نیز می توانید تصویر،نام و سمت فرد را تغییر دهید.
<img src="https://appsaz.ir/wp-content/uploads/2017/02/d.png" alt="" style="width:100%">
<h1>امیر درجه</h1>
<p class="title">مدیر اپ ساز</p>
در خط اول، آدرس قرمز رنگ در واقع آدرس تصویر آپلود شده کاربر می باشد. شما در این قسمت باید آدرس url تصویر موردنظر را جایگزین نمایید. همچنین در خط دوم و سوم به جای متن قرمز رنگ ، متن مورد نظر را وارد نمایید.
در صورت تمایل می توانید به جای یک کارت ویزیت چندین کارت ویزیت در صفحه درباره ما بسازید. برای این کار کافی است کد زیر را مجدد کپی نمایید و قبل از </body> پیست نمایید و این بار اطلاعات فرد جدیدی را وارد نمایید.
<div class="card">
<img src="#" alt="" style="width:100%">
<h1>نام فرد جدید</h1>
<p class="title">سمت</p>
<div style="margin: 24px 0;">
<a href="#"><i class="fa fa-linkedin"></i></a>
</div>
<a href="#"><button>تماس</a></button></a>
</div>
با این کار شما می توانید یک صفحه “درباره ما” حرفه ای با استفاده از سیستم اَپ ساز و بدون هیچ دانش برنامه نویسی ، در کم ترین زمان ممکن بسازید.