شروع به کار با آی اپ

 

بعد از دانلود فایل های مربوط به برنامه، اینجا هر آنچه که نیاز دارید را می توانید بیاموزید !

شروع به کار سریع

به سرعت می توان با آی اپ آماده برنامه نویسی اپ های موبایل شد.

1. ایجاد صفحات

استفاده از مستندات ( کامپوننت ها )به عنوان یک رفرنس برای تمام کامپوننت ها و بخش های دیگر که قرار است با هم در ارتباط باشند تا بتوانند صفحات اپلیکیشن شما را بسازند استفاده می شود. برای شروع هم می توانید از صفحه نمونه ایجاد شده و اولیه ما و نمونه های دیگر آماده شده دیدن کنید و شاید هم از انها بخواهید استفاده کنید. حتما مطمئن شوید که از i-app-theme-ios.css یا i-app-theme-android.cssدر ساختار اپلیکیشن خود و آن هم در بخش <head> اپلیکیشنتان بهره می برید و آن ها را فراخوانی می کنید.

برای نمونه :

 
برای موبایل هایی با سیستم عامل اندروید
 <\link rel="stylesheet" href="i-app-theme-android.css\/> 
برای موبایل هایی با سیستم عامل iOS 
 <\link rel="stylesheet" href="i-app-theme-ios.css\/>  
 

2. اتصال صفحات با استفاده از push.js

درباره push.js بخوانید و سپس شروع به اتصال صفحات خود کنید. Push.js باعث می شود تا برنامه شما زمانی که در موبایلتان ذخیره می شود کاملا با یک اپلیکیشن واقعی یکسان باشد. اطمینان حاصل کنید که یک سرور در حال اجرا است و مرورگر شما شباهت رویدادهای لمسی را در خود دارد. اگر مطمئن نیستید که چگونه این کار را انجام دهید، این آموزش را در مورد تقلید رویدادهای لمسی در Chrome (یا فایرفاکس) بررسی کنید.

3. اپلیکیشن به صورت فایل .apk

در این باره ما در حال راه اندازی سرویسی برای ایجاد فایل .apk برای شما توسعه دهندگان عزیز هستیم. در آینده نزدیک این امکان فراهم می شود.

محتویات فایل ها

آی اپ در دو فرم قابل دانلود می باشد؛

آی اپ پیش ساخته شده

در اینجا فقط کافی است که فایل های مربوط به آی اپ را دانلود و در داایرکتوری اصلی محلی که قرار است تا ادرس سایت موبایلی شما باشد قرار دهید :


i-app/
├── css/
│   ├── i-app.css
│   ├── i-app.min.css
│   ├── i-app-theme-android.css
│   └── i-app-theme-android.min.css
│   ├── i-app-theme-ios.css
│   └── i-app-theme-ios.min.css
├── js/
│   ├── i-app.js
│   └── i-app.min.js
└── fonts/
    ├── i-appicons.eot
    ├── i-appicons.svg
    ├── i-appicons.ttf
    └── i-appicons.woff
    

ساختار بالا اساسی ترین فرم i-app است: فایلهای پیش ساخته برای استفاده سریع در تقریبا هر پروژه ای که بر روی یک هاست و یا بهتر می توان گفت بر روی وب ایجاد و مورد بهره برداری قرار می گیرد. ما CSS و JS کامپایل شده i-app.* CSS و JS i-app.min.* کامپایل شده و کوچک شده را داریم. فونت i-appicon در دایرکتوری اصلی پروژه همانند آنچه که برای iOS و Android قرار داده شده است، وجود دارد.

سورس کد i-app

دانلود کد منبع i-app شامل CSS پیش ساخته، جاوا اسکریپت و دارایی های فونت همراه با منبع ساس، جاوا اسکریپت و اسناد و مدارک است. به طور خاص، این شامل موارد زیر و بیشتر است :


i-app/
├── sass/
├── js/
├── fonts/
├── dist/
   ├── css/
   ├── js/
   └── fonts/

    

دایرکتوری های sass/, js/, and fonts/ برای سورس کدهای مربوط به فایل های CSS، JS و فونت های به کار رفته آیکونی موجود در پروژه می باشند. دایرکتوری dist/ نیز شامل همه فایل های پیش ساخته و کامپایل شده ای است که در ساختار به برنامه نویس کمک می کند.

نصب i-app

3 قانون برای استفاده از فایل های i-app

1. اول

تمام کدهای (.bar) بایستی به عنوان اولین پارامتر در <body> صفحه تعریف شوند. این خیلی اهمیت دارد.

2. بعد همه چیز در .content می آید

همه چیز به جر آنهایی که در .bar نیستند باید در یک div با کلاس.content قرار بگیرند. div مورد نظر را بعد از تگ bar ای که در <body> استفاده شده است قرار دهید.آنچه که در تگ div با کلاس .content به عنوان آنچیزی است که در i-app مورد استفاده قرار می گیرد تا یک اپلیکیشن ساخته شود.

3. متا تگ ها به هیچ عنوان فراموش نشوند

این متا ها در صفحه template.html و برای دانلود قرار دارند, اما باز هم از انها مطمئن شوید. آنها برای کارکرد درست i-app بسیار لازم می باشند.

قالب اولیه و نمونه

از این صفحه اولیه و نمونه برای شروع استفاده کنید :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>i-app template page</title>

    <!-- Sets initial viewport load and disables zooming  -->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">

    <!-- Makes your prototype chrome-less once bookmarked to your phone's home screen -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <!-- Include the compiled i-app CSS -->
    <link href="i-app.css" rel="stylesheet">

    <!-- Include the compiled i-app JS -->
    <script src="i-app.js"></script>
  </head>
  <body>

    <!-- Make sure all your bars are the first things in your <body> -->
    <header class="bar bar-nav">
      <h1 class="title">i-app</h1>
    </header>

    <!-- Wrap all non-bar HTML in the .content div (this is actually what scrolls) -->
    <div class="content">
      <p class="content-padded">Thanks for downloading i-app. This is an example HTML page that's linked up to compiled i-app CSS and JS, has the proper meta tags and the HTML structure. Need some more help before you start filling this with your own content? Check out some i-app resources:</p>
      <div class="card">
        <ul class="table-view">
          <li class="table-view-cell">
            <a class="push-right" href="http://i-app-framework.ir">
              <strong>i-app documentation</strong>
            </a>
          </li>
          <li class="table-view-cell">
            <a class="push-right" href="https://github.com/arashataei/i-app/">
              <strong>i-app on Github</strong>
            </a>
          
          
        </ul>
      </div>
    </div>

  </body>
</html>

پشتیبانی از مرورگر و سیستم عامل های مختلف

سیستم عامل مرورگر آیا پشتیبانی می شود یا خیر ؟
Android (minimum version To Be Decided) Android stock Browser
Android (minimum version To Be Decided) Chrome
Android (minimum version To Be Decided) Firefox To Be Decided
iOS v7.1+ Safari
iOS v7.1+ Chrome To Be Decided
Windows Phone IE Mobile To Be Decided
Opera Mini To Be Decided
Opera Mobile To Be Decided

آی اپ

فایل های CSS متراکم و پردازش شده، JavaScript و فونت های توکار. در این فریمورک از هیچ فایل متنی مستند استفاده نشده است.

دانلود آی اپ

نسخه وب سایت : v2.1

سورس کد

اگر تا به حال موفق به دانلود فایل های سورس مربوط به آی اپ نشده اید، لطفا دانلود بفرمایید.

سورس کد